Mover y arrastrar con Javascript
<!DOCTYPE html>
<html>
<style>
body{background-color:orange;}
.arriba{position:absolute;top:400px;left:100px}
.abajo{position:absolute;top:500px;left:100px}
.derecha{position:absolute;top:450px;left:157px}
.izquierda{position:absolute;top:450px;left:25px}
</style>
<script>
var controlador = true;
function arriba(){
if(controlador == true){
robot.style.top = parseInt(robot.style.top)-1;
setTimeout("arriba();",1);
}
else
controlador = true;
}
function izquierda(){
if(controlador == true){
robot.style.left = parseInt(robot.style.left)-1;
setTimeout("izquierda();",1);
}
else
controlador = true;
}
function derecha(){
if(controlador == true){
robot.style.left = parseInt(robot.style.left)+1;
setTimeout("derecha();",1);
}
else
controlador = true;
}
function abajo(){
if(controlador == true){
robot.style.top = parseInt(robot.style.top)+1;
setTimeout("abajo();",1);
}
else
controlador = true;
}
function parar(){
controlador = false;
}
function inicio(){
boton_arriba.addEventListener("mouseover", arriba);
boton_izquierda.addEventListener("mouseover", izquierda);
boton_derecha.addEventListener("mouseover", derecha);
boton_abajo.addEventListener("mouseover", abajo);
boton_arriba.addEventListener("mouseout", parar);
boton_izquierda.addEventListener("mouseout", parar);
boton_derecha.addEventListener("mouseout", parar);
boton_abajo.addEventListener("mouseout", parar);
}
window.onload=function(){document.onkeydown=desplazar};
function desplazar(objeto){
var tecla = objeto.which;
var situacionY = document.getElementById("robot").offsetLeft;
var situacionX = document.getElementById("robot").offsetTop;
switch (tecla){
case 37 :
robot.style.left = situacionY-20+"px" ; break;
case 38 :
robot.style.top = situacionX-20+"px" ;break;
case 39 :
robot.style.left = situacionY+20+"px" ;break;
case 40 :
robot.style.top = situacionX+20+"px" ;break;
default :alert("Se ha equivocado, debe pulsar las flechas del teclado");
}
}
//Si el navegador del cliente es Mozilla la variable siguiente valdrá true
var moz = document.getElementById && !document.all;
//Flag que indica si estamos o no en proceso de arrastrar el ratón
var estoyArrastrando = false;
//Variable para almacenar un puntero al objeto que estamos moviendo
var dobj;
function arrastrarRaton(e){
if (estoyArrastrando) {
newLeft = moz ? e.clientX : event.clientX;
newTop = moz ? e.clientY : event.clientY;
// CAMBIAR PARA ELEGIR DONDE SE SITUA EL CURSOR
dobj.style.left = newLeft - parseInt(dobj.style.width)/2;
dobj.style.top = newTop - parseInt(dobj.style.height)/2;
dobj.style.left = newLeft - e.offsetLeft;
dobj.style.top = newTop - e.offsetTop;
return false;
}
}
function soltarBoton(e) {
estoyArrastrando = false;
}
function presionarBoton(e) {
//Obtenemos el elemento sobre el que se ha presionado el botón del ratón
var fobj = moz ? e.target : event.srcElement;
// Buscamos el primer elemento en la que esté contenido aquel sobre el que se ha pulsado
// que pertenezca a la clase objMovible.
while (fobj.tagName.toLowerCase() != "html" && fobj.className != "objMovible") {
fobj = moz ? fobj.parentNode : fobj.parentElement;
}
// Si hemos obtenido un objeto movible...
if (fobj.className == "objMovible") {
// Activamos el flag para indicar que se empieza a arrastrar
estoyArrastrando = true;
// Guardamos un puntero al objeto que se está moviendo en la variable global
dobj = fobj;
// Devolvemos false para no realizar ninguna acción posterior
return false;
}
}
document.onmousedown = presionarBoton;
document.onmouseup = soltarBoton;
document.onmousemove = arrastrarRaton;
</script>
<body onload="inicio();">
<form id="form1" action="#" method="POST">
<input type="button" class="derecha" onclick="derecha();" value="Derecha"/>
<input type="button" class="izquierda" onclick="izquierda();" value="Izquierda"/>
<input type="button" class="arriba" onclick="arriba();" value="Arriba"/>
<input type="button" class="abajo" onclick="abajo();" value="Abajo"/>
<img src="robot.png" alt="imagen" id="robot" style="position:absolute; top:150px;left:200px;width:300px; height:300px;" class="objMovible"/>
</form>
</body >
</html>
<html>
<style>
body{background-color:orange;}
.arriba{position:absolute;top:400px;left:100px}
.abajo{position:absolute;top:500px;left:100px}
.derecha{position:absolute;top:450px;left:157px}
.izquierda{position:absolute;top:450px;left:25px}
</style>
<script>
var controlador = true;
function arriba(){
if(controlador == true){
robot.style.top = parseInt(robot.style.top)-1;
setTimeout("arriba();",1);
}
else
controlador = true;
}
function izquierda(){
if(controlador == true){
robot.style.left = parseInt(robot.style.left)-1;
setTimeout("izquierda();",1);
}
else
controlador = true;
}
function derecha(){
if(controlador == true){
robot.style.left = parseInt(robot.style.left)+1;
setTimeout("derecha();",1);
}
else
controlador = true;
}
function abajo(){
if(controlador == true){
robot.style.top = parseInt(robot.style.top)+1;
setTimeout("abajo();",1);
}
else
controlador = true;
}
function parar(){
controlador = false;
}
function inicio(){
boton_arriba.addEventListener("mouseover", arriba);
boton_izquierda.addEventListener("mouseover", izquierda);
boton_derecha.addEventListener("mouseover", derecha);
boton_abajo.addEventListener("mouseover", abajo);
boton_arriba.addEventListener("mouseout", parar);
boton_izquierda.addEventListener("mouseout", parar);
boton_derecha.addEventListener("mouseout", parar);
boton_abajo.addEventListener("mouseout", parar);
}
window.onload=function(){document.onkeydown=desplazar};
function desplazar(objeto){
var tecla = objeto.which;
var situacionY = document.getElementById("robot").offsetLeft;
var situacionX = document.getElementById("robot").offsetTop;
switch (tecla){
case 37 :
robot.style.left = situacionY-20+"px" ; break;
case 38 :
robot.style.top = situacionX-20+"px" ;break;
case 39 :
robot.style.left = situacionY+20+"px" ;break;
case 40 :
robot.style.top = situacionX+20+"px" ;break;
default :alert("Se ha equivocado, debe pulsar las flechas del teclado");
}
}
//Si el navegador del cliente es Mozilla la variable siguiente valdrá true
var moz = document.getElementById && !document.all;
//Flag que indica si estamos o no en proceso de arrastrar el ratón
var estoyArrastrando = false;
//Variable para almacenar un puntero al objeto que estamos moviendo
var dobj;
function arrastrarRaton(e){
if (estoyArrastrando) {
newLeft = moz ? e.clientX : event.clientX;
newTop = moz ? e.clientY : event.clientY;
// CAMBIAR PARA ELEGIR DONDE SE SITUA EL CURSOR
dobj.style.left = newLeft - parseInt(dobj.style.width)/2;
dobj.style.top = newTop - parseInt(dobj.style.height)/2;
dobj.style.left = newLeft - e.offsetLeft;
dobj.style.top = newTop - e.offsetTop;
return false;
}
}
function soltarBoton(e) {
estoyArrastrando = false;
}
function presionarBoton(e) {
//Obtenemos el elemento sobre el que se ha presionado el botón del ratón
var fobj = moz ? e.target : event.srcElement;
// Buscamos el primer elemento en la que esté contenido aquel sobre el que se ha pulsado
// que pertenezca a la clase objMovible.
while (fobj.tagName.toLowerCase() != "html" && fobj.className != "objMovible") {
fobj = moz ? fobj.parentNode : fobj.parentElement;
}
// Si hemos obtenido un objeto movible...
if (fobj.className == "objMovible") {
// Activamos el flag para indicar que se empieza a arrastrar
estoyArrastrando = true;
// Guardamos un puntero al objeto que se está moviendo en la variable global
dobj = fobj;
// Devolvemos false para no realizar ninguna acción posterior
return false;
}
}
document.onmousedown = presionarBoton;
document.onmouseup = soltarBoton;
document.onmousemove = arrastrarRaton;
</script>
<body onload="inicio();">
<form id="form1" action="#" method="POST">
<input type="button" class="derecha" onclick="derecha();" value="Derecha"/>
<input type="button" class="izquierda" onclick="izquierda();" value="Izquierda"/>
<input type="button" class="arriba" onclick="arriba();" value="Arriba"/>
<input type="button" class="abajo" onclick="abajo();" value="Abajo"/>
<img src="robot.png" alt="imagen" id="robot" style="position:absolute; top:150px;left:200px;width:300px; height:300px;" class="objMovible"/>
</form>
</body >
</html>
Comentarios