Drag and Drop en HTML5

HTML5 vino a ahorrarnos mucho tiempo, con una gran cantidad de herramientas nativas que definitivamente, nos hacen la vida más fácil. En este post vamos a introducirnos en la API Drag and Drop (arrastrar y soltar). Esta propiedad tiene soporte nativo para la mayoría de los navegadores y se basa en eventos que podemos activar con nuestro mouse.

¿Cómo funciona? De manera resumida diremos que el usuario al hacer click y mantener pulsado el botón del mouse sobre cualquier objeto, lo arrastra hacia otra ubicación y lo suelta al dejar de presionar el botón (como podemos ver en la imagen al empezar este post). A estos pasos se le conoce como evento, los que encontramos en DnD son:

• dragstart: Este evento es accionado cuando empezamos el arrastre de un elemento, debemos especificar que es lo que estamos arrastrando y establecer los valores correspondientes mediante el método JavaScript setData; este evento solo es invocado una vez (al seleccionar el elemento).
• drag: Este evento es accionado inmediatamente después del método dragstar y ocurre cuando estamos arrastrando el elemento (tenemos el clic presionado sobre el elemento y no lo hemos soltado) y continuará mediante el "arrastrado" (drag) del mismo; el número de veces que se invoque este evento depende del navegador.
• dragcenter: Sucede cuando el elemento arrastrado ingresa a un receptor de soltado.
• dragleave: Ocurre cuando un elemento arrastrable ha sido soltado/movido fuera del contenedor.
• dragover: Ocurre de manera continuamente cuando un elemento arrastrable se mueve dentro de su contenedor y solo se deja de ejecutar hasta que soltemos el elemento arrastrable dentro del contenedor o salgamos del mismo; este evento es perfecto para saber cuál es la posición del elemento arrastrable dentro del contenedor.
  Al igual que ocurre con el evento drag, es perfecto para determinar la posición exacta del elemento arrastrable debido a que se invoca repetidamente mientras que el elemento “arrastrable” esté dentro del contenedor; el número de veces que se invoque este evento depende del navegador.
• drop: Ocurre cuando un elemento arrastrable es soltado dentro de un contenedor; en este evento debemos recolectar la información del elemento arrastrable mediante el método getData
• dragend: Ocurre cuando terminamos de arrastrar el elemento y solo se ejecuta una vez; además es invocado independientemente de si el elemento es “soltado” dentro del contenedor o no.

Sabemos que son muchos eventos y aún no entendemos bien qué podemos hacer con todos ellos, a continuación veremos cómo ocuparlos y qué necesitamos para activarlos.

Con sólo manejar los eventos no es suficiente para empezar a trabajar con Drag and Drop en HTML5. Se debe añadir el atributo draggable="true" a los elementos del DOM que deseamos que sean arrastrables. Recordemos que cualquier elemento del DOM puede ser arrastrable.

Simplemente arrastrando y soltando elementos a diestra y siniestra no es suficiente, a menos que los datos que estamos moviendo se vean afectados; se utiliza este objeto para personalizar las operaciones del Drag and Drop; por ejemplo se emplea para establecer la información del evento arrastrable en el evento dragstart() y se procesa esta información en el evento drop(), veamos algunos de sus métodos más importantes:

.setData(formato, dato)

Con este método debemos insertar la información que se desea guardar desde el elemento arrastrable (drag) y debe tener un tipo definido aunque debes estar pendiente con el soporte de los navegadores:

• Si vas a insertar texto: “text/plain”.
• Si vas a insertar una url: “text/uri-list”.

Esta información se debe establecer en el evento dragstar mediante event.datatransfer.setData(type, data).

Indicamos el tipo de dato (formato) a insertar (“Data”, para cualquier tipo de dato) y el dato.

.getData(formato)

Al contrario del método anterior, este nos devuelve la data recolectada establecida mediante el método setData.

Para recuperar la información se debe hacer solo en el evento drop() mediante event.dataTransfer.getData(type).

.clearData()

Limpia todos los datos establecidos por el método setData(formato, dato) mediante event.dataTransfer.clearData(type).

.setDragImage()

Personaliza la imagen que aparece al lado del puntero cuando el elemento está siendo arrastrado. Utiliza el tamaño X, Y de la imagen.

Veamos un ejemplo básico con Drag and Drop, lo dejé en codepen para que puedas ver el código.

Drag and Drop nos permite hacer muchas variaciones e implementaciones, como por ejemplo arrastrar archivos, tal como cuando los archivas en un correos .

Cómo ya puedes imaginar hay un mundo entero en Drag and Drop , este post espero sirva para introducirte en esta nueva API de HTML5 , te invito a que sigas investigando y aprendiendo más y más.