Drag and Drop

Arrastrar y soltar en la web

Arrastrar un elemento desde un lugar y luego soltarlo en otro es algo
que hacemos todo el tiempo en aplicaciones de escritorio.
Esto no es debido a que las aplicaciones web son diferentes sino
porque desarrolladores nunca contaron con una tecnologa estndar
disponible para ofrecer esta herramienta.
Ahora, gracias a la API Drag and Drop, introducida por la
especificacin HTML5, finalmente tenemos la oportunidad de crear
software para la web que se comportar exactamente como las
aplicaciones de escritorio que usamos desde siempre.
Eventos
Existen siete eventos para esta API:
Dragstart.- Este evento es disparado por el elemento origen cuando
la operacin de arrastre comienza.
Drag.- Este evento es disparado por el elemento origen mientras una
operacin de arrastre se est realizando.
Dragend.- Este evento es disparado por el elemento origen cuando
una operacin de arrastre es terminada, ya sea porque la accin de
soltar fue exitosa o porque la operacin de arrastre fue cancelada.
Dragenter.- Este evento es disparado por el elemento destino
cuando el puntero del ratn entra en el rea ocupada por este
elemento. Este evento siempre tiene que ser cancelado usando el
mtodo preventDefault().
Dragover.- Este evento es disparado peridicamente por el elemento
destino cuando el puntero del ratn est sobre l. Este evento
siempre tiene que ser cancelado usando el mtodo preventDefault().
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 mtodo preventDefault().
dragleave .-Este evento es disparado por el elemento destino cuando
el puntero del ratnsale del rea ocupada por el mismo.
Mtodos
La siguiente es una lista de los mtodos ms importantes incorporados
por esta API:
setData(tipo, dato) Este mtodo 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 mtodo retorna los datos del tipo especificado. Es
usado cuando un evento drop es disparado.
clearData(type) Este mtodo remueve los datos del tipo especificado.
setDragImage(elemento, x, y) Este mtodo reemplaza la imagen en
miniatura creada por el navegador en la operacin arrastrar y soltar por
una imagen personalizada. Tambin declara la posicin que esta
imagen tendr con respecto al puntero del ratn.
El objeto dataTransfer, que contiene los datos transferidos en una
operacin arrastrar y soltar, tambin 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 informacin acerca de los
archivos que estn siendo arrastrados.
dropEffect Esta propiedad retorna el tipo de operacin actualmente
seleccionada. Los valores posibles son: none, copy, link y move.
effectAllowed Esta propiedad retorna los tipos de operacin que
estn permitidos. Puede ser declarada para cambiar las operaciones
permitidas. Los posibles valores son: none,
copy, copyLink, copyMove, link, linkMove, move, all y
uninitialized.
PROPIEDADES