Arrastrar y soltar JavaScript

Resumen: en este tutorial, aprenderá acerca de la API de arrastrar y soltar JavaScript.

Introducción a la API de arrastrar y soltar de JavaScript

HTML5 introdujo formalmente la especificación de arrastrar y soltar. La mayoría de los navegadores web modernos han implementado la función de arrastrar y soltar nativa basada en la especificación HTML5.

De forma predeterminada, solo se pueden arrastrar imágenes y texto. Para arrastrar una imagen, simplemente mantenga presionado el botón del mouse y luego muévalo. Para arrastrar el texto, debe resaltar un texto y arrastrarlo de la misma manera que arrastraría una imagen.

HTML5 especifica que casi todos los elementos se pueden arrastrar. Para que un elemento se pueda arrastrar, agregue la propiedad draggable con el valor de true a su etiqueta HTML. Por ejemplo:

Code language: HTML, XML (xml)

Eventos en elementos arrastrables

Cuando arrastra un elemento, estos eventos se activan en la siguiente secuencia:

• dragstart
• drag
• dragend

Cuando mantienes presionado un botón del mouse y comienzas a moverlo, el evento dragstart se activa en el elemento arrastrable que estás arrastrando. El cursor cambia a un símbolo de no soltar (un círculo con una línea que lo atraviesa) para indicar que no puede soltar el elemento sobre sí mismo.

Después de dragstart El evento se activa, el evento drag se activa repetidamente siempre que arrastre el elemento.

Y el evento dragend se activa cuando dejas de arrastrar el elemento.

El destino de todos los eventos (e.target) es el elemento que se arrastra.

De forma predeterminada , el navegador no cambia la apariencia del elemento arrastrado. Por lo tanto, puede personalizar su apariencia según sus preferencias.

Eventos en destinos de colocación

Cuando arrastra un elemento sobre un destino de colocación válido, estos eventos se activan en la siguiente secuencia:

• dragenter
• dragover
• dragleave o drop

El evento dragenter se activa tan pronto mientras arrastra el elemento sobre un destino para soltar.

Después de que se activa el evento dragenter, el evento dragover se activa repetidamente siempre que arrastre el elemento dentro del límite del destino de colocación.

Cuando arrastre el elemento fuera del límite del destino de colocación, el dragover el evento deja de activarse y el dragleave se activa.

En caso de que suelte el elemento en el objetivo, el drop el evento se activa en lugar del evento dragleave.

El objetivo ( ) del dragenter, dragover, dragleave y drop los eventos son los elementos de destino de colocación.

Destino de colocación válido

Casi todos los elementos admiten los eventos de destino de colocación (dragenter, dragover, dragleave y drop). Sin embargo, no permiten la caída de forma predeterminada.

Si suelta un elemento sobre un destino de caída que no permite la caída, el evento drop ganó. t dispara.

Para convertir un elemento en un destino de caída válido, puede anular el comportamiento predeterminado de dragenter y dragover eventos llamando al método event.preventDefault() en sus correspondientes controladores de eventos. (Consulte la sección de ejemplo para obtener más información)

Transferir datos usando el objeto dataTransfer

Para transferir datos en una acción de arrastrar y soltar, use el dataTransfer objeto.

El objeto dataTransfer es una propiedad del evento. Le permite transferir datos desde el elemento arrastrado al destino de colocación.

El objeto dataTransfer tiene dos métodos: setData() y getData().

El setData() le permite configurar los datos de la operación de arrastre en el formato y los datos especificados :

Code language: CSS (css)

El formato puede ser text/plain o text/uri-list. Y los datos pueden ser una cadena que represente los datos que se agregarán al objeto de arrastre.

El método getData() recupera los datos de arrastre almacenados por setData() método.

El getData() acepta un argumento:

El formato puede ser text/plain o text/uri-list. getData() devuelve una cadena almacenada por el método setData() o una cadena vacía si la operación de arrastre no incluye datos.

Ejemplo de arrastrar y soltar de JavaScript

Desarrollaremos la siguiente aplicación simple de arrastrar y soltar para demostrar la API de arrastrar y soltar de JavaScript:

Cree el estructura del proyecto

Primero, cree una nueva carpeta llamada drag-n-drop-basics. Dentro de esta carpeta, cree dos subcarpetas llamadas css y js.

En segundo lugar, cree un nuevo archivo llamado app.js en la carpeta js, style.css en la css y index.html en la carpeta drag-n-drop-basics.

En tercer lugar, coloque el enlace al style.css y etiqueta de secuencia de comandos que enlaza con app.js en el archivo index.html como este:

Genere el archivo index.html

Coloque el siguiente código en el archivo index.html:

En este archivo index.html, utilizamos el elemento .container para alinear el encabezado y el elemento drop-targets.

Dentro del elemento drop-targets, colocó tres div elementos con la misma clase box. Y colocamos otro elemento div con la clase item en el primer cuadro.

Si abre el index.html y intente arrastrar el cuadro amarillo, verá el cursor que indica que no puede arrastrar:

Para que el elemento se pueda arrastrar, agregue la propiedad draggable con el valor de true a su etiqueta HTML de la siguiente manera:

Code language: JavaScript (javascript)

Ahora, si guarda el index.html, ábralo en el navegador de nuevo, verá que puede arrastrar el elemento del elemento de esta manera:

Manejar eventos en el elemento arrastrable

El archivo style.css tiene el .hide clase que oculta un elemento:

Code language: CSS (css)

En el archivo app.js, agrega el siguiente código:

¿Cómo Funciona:

• Primero, seleccione el elemento arrastrable usando querySelector().
• Segundo, adjunte un dragstart controlador de eventos al elemento arrastrable.
• En tercer lugar, defina la función dragStart() para manejar la dragstart evento.

Si abre el archivo index.html y comienza a arrastrar el elemento arrastrable, verá el mensaje drag starts... en la consola.

En el dragStart controlador de eventos, necesita almacenar el id del elemento arrastrable. Y debe ocultarlo:

Si arrastra el elemento, verá que desaparece una vez que comience a arrastrar.

Para resolver esto, use el setTimeout() función:

Ahora, puede arrastrar el elemento arrastrable fuera de su posición original:

Manejo de eventos en destinos de colocación

El archivo style.css también tiene una clase CSS llamada .drag-over que convierte el estilo de borde del destino de colocación en rojo y discontinuo:

Code language: CSS (css)

En app.js, necesitas para seleccionar los elementos de destino de colocación y manejar dragenter, dragover, dragleave y drop eventos de estos elementos:

El estilo del borde del destino de colocación debe cambiar cuando dragenter y dragover ocurre el evento. Debería restaurar el estilo cuando ocurra el evento dragleave y drop.

Para hacerlo, agregue y elimine la clase drag-over al drop destino de esta manera:

Ahora, si arrastra el elemento arrastrable a otra gota destino, verá que el borde del destino de colocación cambia como se muestra en la siguiente imagen:

Para que el destino de destino sea válido, debe llamar a event.preventDefault() en el dragenter y dragover controladores de eventos como este:

Si no lo hace, el evento drop nunca disparar porque el elemento div no es un destino de colocación válido por defecto.

Si arrastra el elemento arrastrable a un destino de colocación, verá que el cursor cambios que indican que puede eliminar el elemento:

Ahora, si sueltas el elemento item, verás que desaparece inmediatamente.

Para solucionar esto problema, debe agregar el controlador del evento drop.

• Primero, obtenga el id del elemento arrastrable usando el método getData() del dataTransfer objeto.
• En segundo lugar, agregue el elemento que se puede arrastrar como un elemento secundario del elemento de destino de la colocación.
• En tercer lugar, elimine el hide clase del draggable elemento.

El siguiente código muestra la drop controlador de eventos:

Si arrastra y suelta el elemento arrastrable ahora, debería funcionar como se esperaba.

A continuación, se muestra el archivo app.js completo:

Y aquí está el enlace a la demostración.

Resumen

• Agregue la propiedad draggable con el valor de true a un elemento para que se pueda arrastrar.
• Las dragstart, drag y dragend los eventos se activan en el elemento arrastrable.
• dragenter, dragover, o drop los eventos se activan en el destino de caída.
• Llame al event.preventDefault() en el dragenter y dragover controladores de eventos para hacer que un elemento sea un destino de colocación válido.
• Use el event.dataTransfer objeto con los métodos setData() y getData() para transferir datos en la operación de arrastrar y soltar.