Mover imagenes con el mouse

  • Autor Autor spitfire
  • Fecha de inicio Fecha de inicio
spitfire

spitfire

Épsilon
Verificación en dos pasos activada
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

mover-jugadores.webp

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

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



Un ejemplo: http://imgchip.com/mover.php
Insertar CODE, HTML o 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>
 
Última edición:
gracias por sus repuestas, me pongo a investigar
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba