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, pero ni siquiera imaginamos hacerlo en la web. Esto no es debido a
que las aplicaciones web son diferentes sino porque desarrolladores nunca contaron
con una tecnología estándar disponible para ofrecer esta herramienta.
Ahora, gracias a la API Drag and Drop,
introducida por la especificación HTML5, finalmente tenemos la oportunidad de
crear software para la web que se comportará exactamente como las aplicaciones
de escritorio que usamos desde siempre.
Uno de los más importantes aspectos de esta API
es un conjunto de siete nuevos eventos introducidos para informar sobre cada
una de las situaciones involucradas en el proceso. Algunos de estos eventos son
disparados por la fuente (el elemento que es arrastrado) y otros son disparados
por el destino (el elemento en el cual el elemento arrastrado será soltado).
Por ejemplo, cuando el usuario realiza una operación de arrastrar y soltar, el
elemento origen (el que es arrastrado) dispara estos tres eventos:
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 similar al evento
mousemove, excepto que será disparado durante una operación de arrastre por el
elemento origen.
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.
Y estos son los eventos disparados por el
elemento destino (donde el origen será soltado) durante la operación:
dragenter Cuando el puntero del
ratón entra dentro del área ocupada por los posibles elementos destino durante
una operación de arrastrar y soltar, este evento es disparado.
drop Cuando el elemento origen es soltado
durante una operación de arrastrar y soltar, este evento es disparado por el
elemento destino.
dragleave Este evento es
disparado cuando el ratón sale del área ocupada por un elemento durante una
operación de arrastrar y soltar. Este evento es generalmente usado junto con dragenter para mostrar una ayuda
visual al usuario que le permita identificar el elemento destino (donde
soltar).
Antes de trabajar con esta nueva herramienta,
existe un aspecto importante que debemos considerar. Los navegadores realizan
acciones por defecto durante una operación de arrastrar y soltar.
Para obtener el resultado que queremos,
necesitamos prevenir en algunas ocasiones este comportamiento por defecto y
personalizar las reacciones del navegador. Para algunos eventos, como
dragenter, dragover y drop, la prevención es necesaria, incluso cuando una
acción personalizada ya fue especificada.
DEMOSTRACIÓN
En
el espacio de nombre del proyecto damos click derecho y seleccionamos Add à New Items
En
la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como
nombre del archivo “Dragrable.html”, para luego presionar el botón Add.
Empezamos
escribiendo en el cuerpo del documento <BODY></BODY>, lo siguiente:
Los
eventos que se utilizan para este ejemplo son:
onDrop: Se activa cuando se deja de pulsar el botón del ratón tras una operación de arrastre.
onDragOver: Se activa cuando el usuario arrastra un objeto a un objetivo válido para alojarlo; es similar al evento precedente pero es activado después de aquél.
onDragStart: Evento que se activa en cuanto el usuario inicia a arrastrar un objeto.
En
el Encabezado de nuestra página <HEAD></HEAD>, vamos a escribir el
título correspondiente:
PreventDefault() Se
utiliza para detener una acción por omisión.
El
objeto DataTransfer es
usado como contenedor de datos que están siendo manipulados durante la
operación de drag and drop.
setData(tipo, dato) Este método es usado para declarar los datos a ser enviados y su tipo. El método puede recibir tipos de datos regulares (como text/plain, text/html o text/uri-list), tipos de datos especiales (como URL o Text) o incluso tipos de datos personalizados. Un método setData() debe ser llamado por cada tipo de datos que queremos enviar en la misma operación.
getData(tipo) Este método retorna los datos enviados por el origen, pero solo del tipo especificado.
clearData()
Este método remueve los datos del tipo especificado.
Target Hace
referencia al objeto que envió el evento.
appendChild Agrega
un nuevo nodo al final de la lista de un elemento hijo de un elemento padre
especificado.
Y al desplegar nuestra página web:
Veremos el efecto de arrastar y soltar.
