Referencia Rápida en HTML5

Con respecto a una referencia rápida en HTML5, la API Drag and Drop introduce eventos específicos, métodos y propiedades para construir aplicaciones que incorporen la capacidad de arrastrar y soltar elementos en pantalla.

Eventos

Existen siete eventos para esta API:

• dragstart. Este evento se dispara por el elemento origen cuando la operación de arrastre comienza
• drag. Este evento se dispara por el elemento origen mientras una operación de arrastre se está realizando
• dragend. Dicho evento se dispara por el elemento origen cuando una operación de arrastre se termina, ya sea porque la acción de soltar fue exitosa o porque la operación de arrastre se canceló
• dragenter. Este evento se dispara por el elemento destino cuando el puntero del ratón entra en el área en ocupación por este elemento. Este siempre tiene que cancelarse usando el método preventDefault()
• dragover. Este evento se dispara periódicamente por el elemento destino cuando el puntero del ratón está sobre él. Este siempre tiene que cancelarse usando el método preventDefault()
• drop. Tal evento es disparado por el elemento destino cuando el elemento origen se suelta en su interior. Este evento siempre tiene que cancelarse usando el método preventDefault()
• dragleave Este evento se dispara por el elemento destino cuando el puntero del ratón sale del área ocupada por el mismo.

Métodos

La siguiente es una lista de los métodos más importantes incorporados por esta API:

• setData(tipo, dato). Este método se usa para preparar los datos a ser enviados cuando el evento dragstart es disparado. El atributo tipo puede ser cualquier tipo de datos regular (como text/plain o text/html) o un tipo de datos personalizado
• getData(tipo). Este método retorna los datos del tipo especificado. Es usado cuando un evento drop es disparado
• clearData(type). Este método remueve los datos del tipo especificado
• setDragImage(elemento, x, y). Este método reemplaza la imagen en miniatura creada por el navegador en la operación arrastrar y soltar por una imagen personalizada. También declara la posición que esta imagen tendrá con respecto al puntero del ratón.

Propiedades

El objeto dataTransfer, que contiene los datos transferidos en una operación arrastrar y soltar, también introduce algunas propiedades útiles:

• types. Esta propiedad retorna un array con todos los tipos establecidos durante el evento dragstart
  
• files. Esta propiedad retorna un array con información acerca de los archivos que están siendo arrastrados
• dropEffect. Esta propiedad retorna el tipo de operación actualmente seleccionada. Los valores posibles son: none, copy, link y move
• effectAllowed. Esta propiedad retorna los tipos de operación que están permitidos. A su vez, esta puede ser declarada para cambiar las operaciones permitidas. Los posibles valores son: none, copy, copyLink, copyMove, link, linkMove, move, all y uninitialized.