Cómo utilizar la API de arrastrar y soltar

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

Es muy compatible con los navegadores modernos:

Antes de empezar a estudiar la API, debemos saber definir qué elementos de la página sonarrastrable. Podemos hacerlo agregando eldraggableatributo en el HTML de la página, con un valor detrue:

<div draggable="true">
  ...
</div>

Esto es suficiente para que el elemento se pueda arrastrar.

Sugerencia: las imágenes, las selecciones de texto y los enlaces se pueden arrastrar de forma predeterminada a menos que establezcadraggablefalso en ellos

También podemos arrastrar archivos desde la computadora del usuario dentro del navegador. En este caso estamos transfiriendoarchivos.

Dónde podemos arrastrar elementos es otro punto que debemos aclarar. Así como no podemos simplemente arrastrar cualquier elemento, tampoco podemos simplemente soltarlo en cualquier elemento. El elemento debe ser válidosoltar objetivo.

Para convertir un elemento en un destino de gota, escuche sudragoverevento y devuelve falso de él, o llamapreventDefault()sobre el evento pasado:

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

Una vez que lo hacemos, tenemos un elemento que se puede arrastrar y un destino para soltar, y podemos comenzar. Los eventos con los que podemos interactuar en el elemento arrastrable son:

• dragstart
• drag
• dragend

En el destino de caída:

• dragenter
• dragover
• dragleave
• drop

Descripción general de una operación de arrastrar y soltar y los eventos disparados

Cuando el usuario comienza a arrastrar unelemento 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, eldragstartevento se dispara en él:

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

loseventEl objeto pasado como parámetro a la función de manejo de eventos es unDragEventobjeto.

Se extiende desde el más generalObjeto de evento, compartido con todos los demás eventos: mouse, teclado, desplazamiento, etc.

En este punto, el elemento se arrastra y eldragse dispara el evento. Varias veces a medida que se arrastra el elemento, por lo que debemos utilizar la limitación como para elscrollomouseovereventos.

Tan pronto como entremos en unsoltar objetivo:

1. ladragenterel evento se dispara en el destino de caída
2. ladragoverel evento se dispara en el destino de caída

Si un elemento arrastrado entra primero en un destino de colocación y luego se aleja de él, eldragleaveEl evento se dispara en el destino de caída.

Si el usuario suelta el mouse, eldragendEl evento se dispara en el elemento que se está arrastrando, y undropEl evento se dispara en el destino de caída.

Arrastrando datos:DataTransfer

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

• dropEffect
• effectAllowed
• files
• items(solo lectura)
• types(solo lectura)

Cuando se inicia el evento de arrastre, puede realizar algunas operaciones.

Establecer / obtener el efecto

Puede establecer el efecto deseado de la operación de arrastre configurando eleffectAllowedpropiedad en eldragstartevento. Tiene algunas opciones que establecen cómo el destino de colocación debe manejar el elemento colocado:

• noneno debería dejarse caer
• movese puede mover
• copyse puede copiar
• linkse puede vincular
• copyMovese puede copiar o mover
• copyLinkse puede copiar o vincular
• linkMovese puede mover o vincular
• allse puede copiar, mover o vincular

(todos son cuerdas).

El valor predeterminado esall.

losdropEffectLa propiedad se usa 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 presionando elAltestablece el destino de colocación para copiar el elemento en lugar de moverlo.

Esta propiedad no es de solo lectura. Podemos editarlo en undragenterodragoverevent, a uno de esos valores de cadena:

• noneno debería dejarse caer
• movese puede mover
• copyse puede copiar
• linkse puede vincular

Ejemplo:

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

Los datos que se transfieren

Puede acceder a los elementos que se transfieren desde eldataTransfer.itemspropiedad, que es un objeto similar a una matriz que puede iterar usando un bucle y obtener acceso a cadaDataTransferItemobjeto.

DataTransferItemtiene 2 propiedades de solo lectura:

• kind: el tipo de elemento que se arrastra. Devuelve una cadena que contienefileostring
• typeel tipo MIME del elemento

y tiene 2 métodos:

• getAsFile()devuelve unFileobjeto que representa los datos que se arrastran
• getAsString()ejecuta la función de devolución de llamada pegando un objeto de cadena que representa los datos que se arrastran

Tienen un nombre similar pero funcionan de manera muy diferente. El primero devuelve unFileobjeto:

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

Obtenga más información sobre los objetos de archivo enhttps://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 eltypespropiedad de ladataTransferobjeto. Es una matriz que contiene la cadenastringpor defecto. Si estamos arrastrando un archivo, el tipo correspondiente es una cadena de valorFiles.

Si hay archivos que se están transfiriendo, además de estar enumerados endataTransfer.items, se almacenan en elfilespropiedad dedataTransfer.

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

Vea esta demostración en Codepen:

Ver la pluma¡Arrastrar y soltar!por Flavio Copes (@flaviocopios) enCodePen.