ParablanHector Alejandro Parada Blanco |
Moviendo objetos en JavaScript
Categoria: ProgramacionHector Alejandro Parada Blanco
2021-01-24
Ha iniciado un nuevo año y con el he decidido depurar mi ordenador, eliminando archivos e informacion que no es relevante y que simplemente ocupaba capacidad de mi disco duro. Tras estar realizando esta tarea, me encontre con fragmentos de código que no recordaba su existencia, muchos de estos códigos fueron creados hace más de 10 años, realmente no recuerdo el porque los escribi, tal vez fueron escritos tras una practica, un trabajo universitaria o laboral. Sea cual fuera el caso, el día de hoy desempolvaré uno de estos códigos.
Basicamente el código a tratar en este articulo, permite mover objetos dentro de una página html mediante el lenguaje JavaScript.
Así pues, iniciamos creando un esqueleto html con cuatro divs, dos de ellos representarán el origen y destino, mientras los otros dos serán los objetos que podemos mover entre ellos (entre los div origen y destino).
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mover objetos</title>
<style>
h2{
color:#ffffff;
text-align: center;
}
#origen, #destino{
position: relative;
float: left;
width:400px;
height:500px;
margin:10px;
background-color:#333333;
}
#imagen1{
width:180px;
height:200px;
padding:10px;
margin:0 0 0 120px;
background-image: url("imagen1.png");
background-repeat: no-repeat;
}
#imagen2{
width:180px;
height:200px;
padding:10px;
margin:0 0 0 120px;
background-image: url("imagen2.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="origen" name="origen">
<h2>Origen</h2>
<div id="imagen1" name="imagen1">
</div>
<div id="imagen2" name="imagen2">
</div>
</div>
<div id="destino" name="destino">
<h2>Destino</h2>
</div>
</body>
</html>
Como puede observar, se ha agregado imagen de fondo a los div que podrán moverse, con el fin de distinguirlos y hacerlos más vistosos.
Una vez creado nuestro html con su respectivo estilo, creamos el script con las funciones necesarias para generar el movimiento de los objetos. La primera función se llama empezar.
function empezar(e){
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("Data", e.target.getAttribute("id"));
}
Esta función recibe un parametro el cual he llamado e (más adelante lo explicaré), tambien se indica que el objeto tendrá un efecto del tipo move y finalmente se captura y envia el id del objeto que se movera.
La segunda función tiene como nombre sostener y tambien recibe el parametro e. Esta función tiene como finalidad capturar el id de donde proviene el objeto que vamos a mover y permitir que tanto origen como destino sirvan de repositorios.
function sostener(e){
var id = e.target.getAttribute("id");
if(id=="origen"){
return false;
}
if(id=="destino"){
return false;
}
}
Finalmente creamos la función soltar, y en ella creamos una variable la cual recibe como parametro la data capturada del objeto que vamos a soltar en el div destino, despues agregamos el objeto en el destino mediante el parametro appendChild.
function soltar(e){
var imagenarrastrable = e.dataTransfer.getData("Data");
e.target.appendChild (document.getElementById (imagenarrastrable));
}
Ahora activamos cada una de las funciones mediante eventos sobre los div.
<div id="origen" name="origen" ondragover="return sostener(event)" ondrop="return soltar(event)">
<h2>Origen</h2>
<div id="imagen1" name="imagen1" draggable="true" ondragstart="return empezar(event)" ondragend="return fin(event)">
</div>
<div id="imagen2" name="imagen2" draggable="true" ondragstart="return empezar(event)" ondragend="return fin(event)">
</div>
</div>
<div id="destino" name="destino" ondragover="return sostener(event)" ondrop=" return soltar(event)">
<h2>Destino</h2>
</div>
Los eventos que se han utilizado son los siguientes:
ondragover = sostener con el mouse
ondrop = soltar el mouse
draggable = que el objeto sea arrastrable(true) o no arrastrable(false)
ondragstart = llama a una funcion para iniciar
ondragend = llama a una funcion para finalizar
Cada uno de los eventos llama a una función, a la cual se le agrega el parametro event (palabra reservada), creando así un objeto el cual contiene toda la data del mismo (en JavaScript recibimos el objeto con la letra e).
El código completo es el siguiente.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mover objetos</title>
<style type="text/css">
h2{
color:#ffffff;
text-align: center;
}
#origen, #destino{
position: relative;
float: left;
width:400px;
height:500px;
margin:10px;
background-color:#333333;
}
#imagen1{
width:180px;
height:200px;
padding:10px;
margin:0 0 0 120px;
background-image: url("imagen1.png");
background-repeat: no-repeat;
}
#imagen2{
width:180px;
height:200px;
padding:10px;
margin:0 0 0 120px;
background-image: url("imagen2.png");
background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
function empezar(e){
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("Data", e.target.getAttribute("id"));
}
function sostener(e){
var id = e.target.getAttribute("id");
if(id=="origen"){
return false;
}
if(id=="destino"){
return false;
}
}
function soltar(e){
var imagenarrastrable = e.dataTransfer.getData("Data");
e.target.appendChild (document.getElementById (imagenarrastrable));
}
</script>
</head>
<body>
<div id="origen" name="origen" ondragover="return sostener(event)" ondrop="return soltar(event)">
<h2>Origen</h2>
<div id="imagen1" name="imagen1" draggable="true" ondragstart="return empezar(event)" ondragend="return fin(event)">
</div>
<div id="imagen2" name="imagen2" draggable="true" ondragstart="return empezar(event)" ondragend="return fin(event)">
</div>
</div>
<div id="destino" name="destino" ondragover="return sostener(event)" ondrop=" return soltar(event)">
<h2>Destino</h2>
</div>
</body>
</html>
A continuación algunas capturas de pantalla mostrando el funcionamiento del script.
Moviendo imagen del fantasma al div destino.
Moviendo imagen del personaje con la bolsa en la cabeza al div origen.
Dejando personaje con la bolsa en la cabeza en el div origen y el fantasma en el div destino.
Deja un comentario
Tu correo electrónico no será publicado. Tu nombre, comentario y código
captcha son obligatorios.
