HTML5 – Arrastrar y soltar
Arrastrar y soltar (DnD) es un poderoso concepto de interfaz de usuario que facilita la copia, reordenación y eliminación de elementos con la ayuda de clics del mouse. Esto permite al usuario hacer clic y mantener presionado el botón del mouse sobre un elemento, arrastrarlo a otra ubicación y soltar el botón del mouse para soltar el elemento allí.
Para lograr la funcionalidad de arrastrar y soltar con HTML4 tradicional, los desarrolladores tendrían que usar programación JavaScript compleja u otros marcos JavaScript como jQuery, etc.
Ahora HTML 5 creó una API de arrastrar y soltar (DnD) que brinda compatibilidad nativa con DnD a la creación del navegador es mucho más fácil de codificar.
HTML 5 DnD es compatible con los principales navegadores como Chrome, Firefox 3.5 y Safari 4, etc.
Eventos de arrastrar y soltar
Hay varios eventos que se activan durante varias etapas de la operación de arrastrar y soltar. Estos eventos se enumeran a continuación:
| Sr.No. | Eventos & Descripción |
|---|---|
| 1 |
dragstart Se activa cuando el usuario comienza a arrastrar el objeto. |
| 2 |
dragenter Se activa cuando el mouse se mueve por primera vez sobre el elemento de destino mientras se produce un arrastre. Un oyente de este evento debe indicar si se permite una caída en esta ubicación. Si no hay oyentes, o los oyentes no realizan operaciones, entonces no se permite una caída de forma predeterminada. |
| 3 |
dragover Este evento se activa cuando el mouse se mueve sobre un elemento cuando se produce un arrastre. La mayor parte del tiempo, la operación que ocurre durante un oyente será la misma que la del evento dragenter. |
| 4 |
dragleave Este evento se activa cuando el mouse abandona un elemento mientras ocurre un arrastre. Los oyentes deben eliminar cualquier marcador de inserción o resaltado que se use para enviar comentarios. |
| 5 |
arrastrar Se dispara cada vez que se mueve el mouse mientras se arrastra el objeto. |
| 6 |
drop El evento drop se dispara en el elemento donde se produjo la caída al final de la operación de arrastre. Un oyente sería responsable de recuperar los datos que se arrastran e insertarlos en la ubicación de colocación. |
| 7 |
dragend Se activa cuando el usuario suelta el botón del mouse mientras arrastra un objeto. |
Nota: tenga en cuenta que solo se activan los eventos de arrastre; los eventos del mouse como mousemove no se activan durante una operación de arrastre.
El objeto DataTransfer
Los métodos de escucha de eventos para todos los eventos de arrastrar y soltar aceptan el objeto Event que tiene un atributo de solo lectura llamado dataTransfer.
El event.dataTransfer devuelve el objeto DataTransfer asociado con el evento de la siguiente manera:
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
El objeto DataTransfer contiene datos sobre el arrastre y operación de caída. Estos datos se pueden recuperar y configurar en términos de varios atributos asociados con el objeto DataTransfer como se explica a continuación:
| Sr.No. | Atributos de DataTransfer y su descripción |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Devuelve una DOMStringList que enumera los formatos que se establecieron en el evento dragstart. Además, si se arrastra algún archivo, entonces uno de los tipos será la cadena «Archivos». |
| 4 |
dataTransfer.clearData () Elimina los datos de los formatos especificados. Elimina todos los datos si se omite el argumento. |
| 5 |
dataTransfer.setData (formato, datos) Agrega los datos especificados. |
| 6 |
data = dataTransfer.getData (formato) Devuelve los datos especificados. Si no hay tales datos, devuelve la cadena vacía. |
| 7 |
dataTransfer.files Devuelve una lista de archivos de los archivos que se arrastran, si los hay. |
| 8 |
dataTransfer.setDragImage (element, x, y) Utiliza el elemento dado para actualizar la retroalimentación de arrastre, reemplazando cualquier retroalimentación previamente especificada. |
| 9 |
dataTransfer.addElement (elemento) Agrega el elemento dado al lista de elementos utilizados para representar la retroalimentación de arrastre. |
Proceso de arrastrar y soltar
A continuación se muestran los pasos a seguir para implementar la operación de arrastrar y soltar –
Paso 1 – Hacer que un objeto se pueda arrastrar
Estos son los pasos a seguir –
-
Si desea arrastrar un elemento, debe establecer el atributo arrastrable en verdadero para ese elemento.
-
Establecer un detector de eventos para dragstart que s arrastra los datos que se arrastran.
-
El detector de eventos dragstart establecerá los efectos permitidos (copiar, mover, vincular o alguna combinación).
A continuación se muestra el ejemplo para hacer que un objeto se pueda arrastrar –
Esto producirá el siguiente resultado –
Paso 2 – Soltar el objeto
Para aceptar una gota, el destino de la gota debe escuchar al menos tres eventos.
-
El evento dragenter, que se utiliza para determinar si el destino de la gota debe aceptar la gota o no. . Si se va a aceptar el envío, entonces este evento debe cancelarse.
-
El evento dragover, que se utiliza para determinar qué comentarios se mostrarán al usuario. Si el evento se cancela, los comentarios (normalmente el cursor) se actualizan en función del valor del atributo dropEffect.
-
Finalmente, el evento de caída, que permite la caída real
A continuación se muestra el ejemplo para colocar un objeto en otro objeto:
Esto producirá el siguiente resultado: