☰
Inicio > programar > Cómo utilizar la API de arrastrar y soltar

Cómo utilizar la API de arrastrar y soltar

📅 21/01/2025 👤 Julio Fuente 📂 programar

Main Image

Descubra cómo utilizar la API de arrastrar y soltar para crear experiencias interactivas para sus usuarios

Usando la API de arrastrar y soltar puedes definir qué elementos de la página se pueden arrastrar e interceptar cuando el usuario arrastra un elemento.

Tiene un excelente soporte en los navegadores modernos:

Antes de comenzar a estudiar la API, debemos saber cómo definir qué elementos de la página se pueden arrastrar . Podemos hacerlo agregando el draggableatributo en el HTML de la página, con un valor de true:

div draggable="true".../div

Esto es suficiente para hacer que el elemento sea arrastrable.

draggableConsejo: las imágenes, las selecciones de texto y los enlaces se pueden arrastrar de forma predeterminada, a menos que los configure como falsos.

También podemos arrastrar archivos desde el ordenador del usuario dentro del navegador. En este caso estamos transfiriendo archivos .

Otro punto que debemos aclarar es hacia dónde podemos arrastrar elementos. Así como no podemos arrastrar cualquier elemento, tampoco podemos soltarlo en cualquier elemento. El elemento debe ser un destino de colocación válido .

Para convertir un elemento en un destino de colocación, escuchas su dragoverevento y devuelves falso o llamas preventDefault()al evento pasado:

const element = document.querySelector('#my-drop-target)element.addEventListener('dragover', event = {  event.preventDefault()})

Una vez que lo hagamos, tendremos un elemento arrastrable y un destino para soltar, y podremos empezar. Los eventos con los que podemos interactuar en el elemento arrastrable son:

En el objetivo de caída:

Cuando el usuario comienza a arrastrar un elemento arrastrable , haciendo clic en él con el mouse y moviendo el mouse, o también tocando y manteniendo el toque y luego moviendo la selección, dragstartse dispara el evento:

element.addEventListener('dragstart', (event) = {  //...})

El eventobjeto que se pasa como parámetro a la función de manejo de eventos es un DragEventobjeto.

Se extiende desde el objeto Evento más general , compartido con todos los demás eventos: mouse, teclado, desplazamiento, etc.

En este punto, se arrastra el elemento y dragse activa el evento. Esto se produce varias veces mientras se arrastra el elemento, por lo que debemos utilizar una limitación como la de los eventos scrollo mouseover.

Tan pronto como entramos en un objetivo de caída :

  1. El dragenterevento se activa en el objetivo de caída.
  2. El dragoverevento se activa en el objetivo de caída.

Si un elemento arrastrado primero ingresa a un destino de colocación y luego se aleja de él, el dragleaveevento se activa en el destino de colocación.

Si el usuario suelta el mouse, dragendse dispara el evento en el elemento que se está arrastrando y dropse dispara un evento en el destino donde se colocó.

Cada evento relacionado con arrastrar y soltar es un DragEventobjeto como mencioné, y viene con una propiedad llamada dataTransferque contiene los datos que se arrastran y ofrece 5 propiedades:

Cuando comienza el evento de arrastre, puedes realizar algunas operaciones.

Puede configurar el efecto deseado de la operación de arrastre configurando la effectAllowedpropiedad en el dragstartevento. Tiene algunas opciones que configuran cómo el destino de colocación debe manejar el elemento colocado:

(todas son cadenas).

El valor predeterminado es all.

La dropEffectpropiedad se utiliza para obtener el tipo de operación de arrastrar y soltar, que esta vez lo establece el usuario mediante el uso de teclas modificadoras. Por ejemplo, en una Mac, al presionar la Alttecla, el destino de colocación se copia para que el elemento se mueva en lugar de copiarlo.

Esta propiedad no es de solo lectura. Podemos editarla en un evento dragentero dragovercon uno de estos valores de cadena:

Ejemplo:

element.addEventListener('dragenter', (event) = {  event.dataTrasfer.dropEffect = 'move'})

Puede acceder a los elementos que se transfieren desde la dataTransfer.itemspropiedad, que es un objeto similar a una matriz que puede iterar mediante un bucle y obtener acceso a cada DataTransferItemobjeto.

DataTransferItemtiene 2 propiedades de solo lectura:

y tiene 2 métodos:

Tienen un nombre similar pero funcionan de forma muy diferente. El primero devuelve un Fileobjeto:

element.addEventListener('dragenter', (event) = {  for (item of event.dataTrasfer.items) {    const theFile = item.getAsFile()  }})

Obtenga más información sobre los objetos de archivo en https://flaviocopes.com/file/

El segundo pasa el elemento como una cadena a una función de devolución de llamada:

element.addEventListener('dragenter', (event) = {  for (item of event.dataTrasfer.items) {    item.getAsString((theString) = {      console.log(theString)    })  }})

Los tipos de archivos de elementos que se arrastran se almacenan en la typespropiedad del dataTransferobjeto. Es una matriz que contiene la cadena stringpor defecto. Si estamos arrastrando un archivo, el tipo correspondiente es una cadena de valor Files.

Si hay archivos que se transfieren, además de estar listados en dataTransfer.items, se almacenan en la filespropiedad de dataTransfer.

Esta propiedad apunta a un FileListobjeto que enumera los archivos que se están arrastrando.

Mira esta demostración en Codepen: https://codepen.io/flaviocopes/pen/JqXZoB/




Tal vez te puede interesar:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. Cómo comprobar si un elemento DOM tiene una clase

Créditos de la imagen http://dbbeebom