Drag and Drop (Arrastrar y soltar)
Esta "api" es la encargada de trabajar con la función de arrastrar y soltar elementos. Debido a que esta tiene una estrecha relación con las interacciones del usuario, cuenta con múltiples eventos que se aplicarán a los diferentes elementos involucrados.
Eventos del Objeto
Se trata de los eventos que se desencadenan al arrastrar un elemento. Para esto es necesario que la acción se desencadene desde el contenido del elemento, no desde sus bordes. Los eventos de este tipo son:
-
dragstart: Este evento se dispara en el momento en el que es "sujetado" el elemento en cuestión.
Ejemplo
-
drag: Este evento se dispara mientras un elemento es sujetado.
Ejemplo
-
dragend: Este último evento se dispara en el momento en el que el objeto arrastrado es soltado.
Ejemplo
Eventos de Zona
Se tratan de los eventos que posee el objeto sobre el cual se está desplazando el elemento arrastrado; estos eventos son:
-
dragenter: Este evento se dispara en el momento en que el elemento arrastrado ingrese en el interior del elemento de fondo. En otras palabras, el elemento de fondo percibe cuándo el elemento arrastrado entra dentro de su zona.
Ejemplo
-
dragover: Este evento se dispara mientras el elemento esté siendo arrastrado sobre la zona del elemento de fondo.
Ejemplo
-
drop: Este evento se dispara cuando el elemento arrastrado es soltado sobre el elemento de fondo. Sin embargo, este evento cuenta con una particularidad: por defecto su ejecución se encuentra BLOQUEADA a menos que se indique lo contrario.
Para definir esta "autorización" es necesario pasar un parámetro (comúnmente llamado "e") al evento "dragover" y luego definir que NO se utilice la configuración por defecto mediante e.preventDefault().
Ejemplo de autorización
Ejemplo de Drop
-
dragleave: Este evento se dispara en el momento en el que el objeto salga del elemento de fondo; es decir, el elemento de fondo detecta cuando el elemento arrastrado deja de estar ubicado sobre este.
Ejemplo
Propiedad dataTransfer
Se trata del objeto encargado de transferir datos entre los diferentes elementos. Es el encargado de indicarle a los elementos de fondo qué otro elemento se está desplazando sobre ellos o indicar al elemento arrastrado que se está desplazando por la página.
El funcionamiento de este objeto radica en aplicarlo dentro del evento "dragstart" proveyendo un parámetro ("e") para acceder a la propiedad ".dataTransfer":
Ejemplo
Resultado
Este objeto es compartido entre el elemento arrastrado y el elemento de fondo. Para compartir un dato, se utiliza el método setData().
Esto se realiza aplicando el método al parámetro ingresado ("e"), indicando el tipo de formato y el valor a compartir:
Ejemplo
Nota: Normalmente no se utiliza la clase para esto, ya que más de un objeto puede poseer una misma clase; lo más común es que se utilice un "id".
Por otro lado, para obtener los datos se utiliza el método getData(), el cual únicamente necesita el nombre del parámetro enviado para acceder a este.
Ejemplo
Por último, para obtener los datos desde otro lugar se recurre al evento "drop":
Ejemplo
