Este documento describe la funcionalidad de arrastrar y soltar en la web. Permite arrastrar elementos como gráficos y texto dentro de otros elementos en la pantalla. Existen siete eventos y varios métodos y propiedades para manejar operaciones de arrastrar y soltar, incluyendo establecer y obtener datos, imágenes personalizadas y tipos de archivos.

1. Drag and Drop
Arrastrar y soltar en la web
Este capitulo incorpora la posibilidad de arrastrar y soltar elementos en la
pantalla como lo haríamos comúnmente en aplicaciones de escritorio.
Ahora, con unas pocas líneas de código, podemos hacer que un elemento
esté disponible para ser arrastrado y soltadondentro de otro elemento en la
pantalla. Estos elementos pueden incluir no solo gráficos sino además
textos, enlaces, archivos o datos en general.

2. Eventos
Existen siete eventos para esta API:
.
 dragstart Este evento es disparado en el momento en el que el arrastre comienza.
Los datos asociados con el elemento origen son definidos en este momento en el
sistema.
 Drag.- Este evento es disparado por el elemento origen mientras una operación de
arrastre se está realizando, similar al evento mousemove, excepto que será
disparado durante
 dragend .-Cuando la operación de arrastrar y soltar finaliza (sea la operación exitosa
o no) este evento es disparado por el elemento origen.
 Dragenter.- Este evento es disparado por el elemento destino cuando el puntero del
ratón entra en el área ocupada por este elemento..Este evento siempre tiene que ser
cancelado usando el método preventDefault()
 Dragover.- Este evento es disparado periódicamente por el elemento destino
cuando el puntero del ratón está sobre él. Este evento siempre tiene que ser
cancelado usando el método preventDefault().

3.  Drop.- Este evento es disparado por el elemento destino cuando el
elemento origen es soltado en su interior. Este evento siempre tiene que
ser cancelado usando el método preventDefault().
 dragleave .-Este evento es disparado por el elemento destino cuando el
puntero del ratónsale del área ocupada por el mismo.

4. Métodos
La siguiente es una lista de los métodos más importantes incorporados por esta
API:
 setData(tipo, dato) Este método es usado 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.

5. 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. Puede ser declarada para cambiar las operaciones permitidas.
Los posibles valores son: none,copy, copyLink, copyMove, link,
linkMove, move, all y uninitialized.