¡Esta es una revisión vieja del documento!
Para explicar como funciona drag & drop, vamos a usar el siguiente ejemplo
<!DOCTYPE HTML> <html> <head> <style> .destino { width: 350px; height: 70px; border: 1px solid #aaaaaa; } </style> <script> function onDragStart(ev) { var element=ev.target; var data=element.innerText; ev.dataTransfer.setData("text/plain", data); } function onDrop(ev) { ev.preventDefault(); var element=ev.target; var data = ev.dataTransfer.getData("text/plain"); element.innerText=data; } function onDragOver(ev) { ev.preventDefault(); } </script> </head> <body> <p>Arrastra aquí la pieza a reparar:</p> <p class="destino" ondrop="onDrop(event)" ondragover="onDragOver(event)"></p> <ul> <li draggable="true" ondragstart="onDragStart(event)">Disco duro</li> <li draggable="true" ondragstart="onDragStart(event)">Procesador</li> <li draggable="true" ondragstart="onDragStart(event)">Memoria RAM</li> <li draggable="true" ondragstart="onDragStart(event)">Placa base</li> </ul> </body> </html>
draggable="true"
: Permite que ese elemento sea arrastableondragstart
: Función que se ejecuta al empezar a arrastrar el elemento.ev.target
: Obtenemos el elemento que se está arrastrando.ev.dataTransfer.setData("text", data);
: Guardamos la información de lo que se está arrastrando.ondragover
: Se ejecuta cuando hay algo arrastrándose sobre él , pero aun no se ha soltado. Se usa para indicar si se puede soltar sobre él. En caso de que si se pueda, habrá que llamar a la función ev.preventDefault();
ondrop
: Se ejecuta cuando se ha soltado el elemento sobre él.ev.target
: Elemento donde se ha soltadoev.dataTransfer.getData("text")
: Obtenemos la información de lo que se estaba arrastrando.
El objeto dataTransfer
es donde se almacena lo que que se está arrastrando.
Para guardar el dato, se usa:
ev.dataTransfer.setData("text/plain", data);
Para obtener el dato, se usa:
var data = ev.dataTransfer.getData("text/plain");
Sin embargo , podemos pensar que no es muy útil ya que se podría usar directamente una variable de JavaScript. En ese caso vamos a usar una variable global llamada data
y el código quedaría así:
var dragData=""; function onDragOver(ev) { ev.preventDefault(); } function onDragStart(ev) { var element=ev.target; dragData=element.innerText; } function onDrop(ev) { ev.preventDefault(); var element=ev.target; element.innerText=dragData; }
¿cual es la diferencia entre usar dataTransfer
y una variable de JavaScript dragData
?. Pues que usando dataTransfer
podemos hacer el Drag & Drop entre aplicaciones y con la variable no podemos hacer eso.
Sin embargo la ventaja de usar la variable es que podemos almacenar mas cosas que un simple texto.
Crea un programa en JavaScript+HTML+CSS de un puzzle. En la parte superior estarán las 4 imágenes del puzzle sin colocar. En la parte imferior, habrá un cuadro con los 4 huecos a colocar.
Separa todo lo que puedas la parte visual de la lógica del puzzle
Para ello crea una clase Puzzle que no contenga nada de parte visual.