Mover imagens com o mouse

spitfire · 16/08/2014

Buenas, estoy haciendo una especie de juego de navegador tipo mangerzone o similar pero con otro deporte y hay una parte en donde el usuario puede mover cada jugador de un lugar al otro y dependiendo del lugar donde lo coloque, sera la habilidad que desarrolla (velocidad, remates, pases, pases largos, etc) alguien sabe o podria darme alguna pista de como puedo hacer eso?

-en resumen...

-tendria que poder mover los jugadores de una plantilla lateral al lugar del campo indicado para cada habilidad y que este se quede alli

-al depositar dicho jugador en la habilidad seleccionada tendria que cambiar un valor X en el registro de la base de datos de dicho jugador, supongo que luego con un cronjob diario le iria aumentando el valor en cada habilidad durante el tiempo que este ahi

aca les dejo una captura para ilustrar el tema...

como ven tome con mi mouse al jugador 9 y lo estoy moviendo para depositarlo en uno de los sectores, mas precisamente a su izquierda donde se ve un lugar vacio que es de donde lo saque para tomar esta captura, al ponerlo ahi y luego de guardar los cambios, el jugador seguira aumentando la habilidad inteligencia

muchas gracias por su atencion, no busco que me den la solucion, tan solo una pista para poder investigar en el lugar correcto, gracias...

Cicklow · 16/08/2014

eso lo puedes hacer con jquery usando: Draggable | jQuery UI

zcriptz · 16/08/2014

También podes con Javascript.

onmousedown + onmouseup + setInterval + offsetTop + offsetLeft + offsetHeight + offsetWidth + pageX + pageY

Un ejemplo: http://imgchip.com/mover.php

Inserir CODE, HTML ou PHP:

<script type="text/javascript">
var mouse = {x: 0, y: 0};

document.addEventListener('mousemove', function(e){ 
    mouse.x = e.clientX || e.pageX; 
    mouse.y = e.clientY || e.pageY 
}, false);

window.onmouseup = soltar;

function soltar(){
document.getElementById('cuadrado').className = '';
clearInterval(inter);
}

function agarrado(e){
document.getElementById('cuadrado').className = 'apretado';
inter = setInterval("mover()", 10);
}

function mover(){
cuadrado = document.getElementById('cuadrado');
ancho = cuadrado.offsetWidth/2;
alto = cuadrado.offsetHeight/2;
cuadrado.style.top = mouse.y-ancho+'px';
cuadrado.style.left = mouse.x-alto+'px';
}
</script>
<style>
.apretado{
box-shadow: 0px 0px 3px gray; 
}
</style>
<div id="cuadrado" style="background:black; position:absolute; height:50px; width:50px" onmousedown="agarrado()"></div>

spitfire · 17/08/2014

gracias por sus repuestas, me pongo a investigar

Mover imagens com o mouse

spitfire

Cicklow

zcriptz

spitfire

Tópicos similares