7. Drag & Drop

Drag & Drop

Dragula: Alto nivel

interact.js: Bajo nivel

API de HTML 5

API

Para explicar como funciona drag & drop, vamos a usar el siguiente ejemplo

Atributo draggable="true" : Permite que ese elemento sea arrastable

Evento ondragstart: 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.

Evento 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();

Evento ondrop: Se ejecuta cuando se ha soltado el elemento sobre él.

ev.target: Elemento donde se ha soltado

ev.dataTransfer.getData("text"): Obtenemos la información de lo que se estaba arrastrando.

dataTransfer

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í:

¿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.

Ejercicios

Ejercicio 5

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.

Ejercicio 6

Al arrastrar el icono de "Avión despegando" sobre el texto de "Nº de Vuelos Despegados" se incrementará en 1 el valor

Al arrastrar el icono de "Avión aterrizando" sobre el texto de "Nº de Vuelos Aterrizados" se incrementará en 1 el valor

Al arrastrar el icono de "Nº de Vuelos Despegados" sobre el icono de "La papelera" se decrementará en 1 el valor

Al arrastrar el icono de "Nº de Vuelos Aterrizados" sobre el icono de "La papelera" se decrementará en 1 el valor

Solución