Descubra cómo utilizar la API de arrastrar y soltar para crear experiencias interactivas para sus usuarios
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 eldraggable
atributo 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 establezca
draggable
falso 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 sudragover
evento 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, eldragstart
evento se dispara en él:
element.addEventListener('dragstart', event => {
//...
})
losevent
El objeto pasado como parámetro a la función de manejo de eventos es unDragEvent
objeto.
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 eldrag
se dispara el evento. Varias veces a medida que se arrastra el elemento, por lo que debemos utilizar la limitación como para elscroll
omouseover
eventos.
Tan pronto como entremos en unsoltar objetivo:
- la
dragenter
el evento se dispara en el destino de caída - la
dragover
el 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, eldragleave
El evento se dispara en el destino de caída.
Si el usuario suelta el mouse, eldragend
El evento se dispara en el elemento que se está arrastrando, y undrop
El evento se dispara en el destino de caída.
Arrastrando datos:DataTransfer
Cada evento relacionado con arrastrar y soltar viene es unDragEvent
objeto como mencioné, y viene con una propiedad llamadadataTransfer
que 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 eleffectAllowed
propiedad en eldragstart
evento. Tiene algunas opciones que establecen cómo el destino de colocación debe manejar el elemento colocado:
none
no debería dejarse caermove
se puede movercopy
se puede copiarlink
se puede vincularcopyMove
se puede copiar o movercopyLink
se puede copiar o vincularlinkMove
se puede mover o vincularall
se puede copiar, mover o vincular
(todos son cuerdas).
El valor predeterminado esall
.
losdropEffect
La 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 elAlt
establece el destino de colocación para copiar el elemento en lugar de moverlo.
Esta propiedad no es de solo lectura. Podemos editarlo en undragenter
odragover
event, a uno de esos valores de cadena:
none
no debería dejarse caermove
se puede movercopy
se puede copiarlink
se 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.items
propiedad, que es un objeto similar a una matriz que puede iterar usando un bucle y obtener acceso a cadaDataTransferItem
objeto.
DataTransferItem
tiene 2 propiedades de solo lectura:
kind
: el tipo de elemento que se arrastra. Devuelve una cadena que contienefile
ostring
type
el tipo MIME del elemento
y tiene 2 métodos:
getAsFile()
devuelve unFile
objeto que representa los datos que se arrastrangetAsString()
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 unFile
objeto:
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 eltypes
propiedad de ladataTransfer
objeto. Es una matriz que contiene la cadenastring
por 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 elfiles
propiedad dedataTransfer
.
Esta propiedad apunta a unFileList
objeto 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.
Tech Wiki Online!