Mover imagenes con el mouse

spitfire · 2014-08-16T01:10:44-0500

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 · 2014-08-16T01:12:34-0500

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

zcriptz · 2014-08-16T04:47:00-0500

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>

spitfire · 2014-08-17T00:57:29-0500

gracias por sus repuestas, me pongo a investigar

Mover imagenes con el mouse

spitfire Seguir

Cicklow

zcriptz

spitfire