Breaking

Post Top Ad

Your Ad Spot

martes, 14 de enero de 2020

Cómo usar 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.
Está muy bien soportado en los navegadores modernos:
Soporte del navegador
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 la página HTML, con un valor de true:
<div draggable="true">
  ...
</div>
Esto es suficiente para hacer que el elemento sea arrastrable.
Sugerencia: las imágenes, las selecciones de texto y los enlaces se pueden arrastrar de manera predeterminada a menos que los configure draggablecomo falsos
También podemos arrastrar archivos desde la computadora del usuario dentro del navegador. En este caso estamos transfiriendo archivos .
A dónde podemos arrastrar elementos es otro punto que necesitamos aclarar. Así como no podemos simplemente arrastrar cualquier elemento, tampoco podemos simplemente soltarlo en cualquier elemento. El elemento debe ser un destino de caída válido .
Para convertir un elemento en un destino de destino, escucha su dragoverevento y devuelve falso de él, o llama preventDefault()al evento pasado:
const element = document.querySelector('#my-drop-target)
element.addEventListener('dragover', event => {
  event.preventDefault()
})
Una vez que lo hagamos, tenemos un elemento arrastrable y un objetivo para soltar, y podemos comenzar. Los eventos con los que podemos interactuar en el elemento arrastrable son:
  • dragstart
  • drag
  • dragend
En el objetivo de caída:
  • dragenter
  • dragover
  • dragleave
  • drop

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

Cuando el usuario comienza a arrastrar un elemento que se puede arrastrar , hacer clic con el mouse y moverlo, o también tocar y mantener el toque y luego mover la selección, dragstartse activa el evento:
element.addEventListener('dragstart', event => {
  //...
})
El eventobjeto pasado 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, el elemento se está arrastrando y dragse activa el evento. Varias veces a medida que se arrastra el elemento, por lo que debemos usar la aceleración como para los eventos scrollmouseover.
Tan pronto como ingresemos un objetivo de caída :
  1. el dragenterevento se dispara en el objetivo de caída
  2. el dragoverevento se dispara en el objetivo de caída
Si un elemento arrastrado entra primero en un objetivo de caída y luego se aleja de él, el dragleaveevento se dispara en el objetivo de caída.
Si el usuario suelta el mouse, el dragendevento se dispara en el elemento que se está arrastrando y dropse dispara un evento en el destino de colocación.

Arrastrando datos: DataTransfer

Cada evento relacionado con arrastrar y soltar viene es un DragEventobjeto como mencioné, y viene con una propiedad llamada dataTransferque contiene los datos que se arrastran y ofrece 5 propiedades:
  • dropEffect
  • effectAllowed
  • files
  • items (solo lectura)
  • types (solo lectura)
Cuando comienza el evento de arrastre, puede hacer algunas operaciones.

Establecer / obtener el efecto

Puede establecer el efecto deseado de la operación de arrastre configurando la effectAllowedpropiedad en el dragstartevento. Tiene algunas opciones que establecen cómo el destino de caída debe manejar el elemento descartado:
  • none no debe dejarse caer
  • move se puede mover
  • copy se puede copiar
  • link se puede vincular
  • copyMove se puede copiar o mover
  • copyLink se puede copiar o vincular
  • linkMove se puede mover o vincular
  • all se puede copiar, mover o vincular
(Todos son cuerdas).
El valor por defecto es all.
La dropEffectpropiedad se usa para obtener el tipo de operación de arrastrar y soltar, que esta vez es establecida por el usuario mediante el uso de teclas modificadoras. Por ejemplo, en una Mac, al presionar la Alttecla, se establece el objetivo para copiar el elemento en lugar de moverlo.
Esta propiedad no es de solo lectura. Podemos editarlo en un evento dragenterdragover, a uno de esos valores de cadena:
  • none no debe dejarse caer
  • move se puede mover
  • copy se puede copiar
  • link 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 la dataTransfer.itemspropiedad, que es un objeto tipo matriz que puede iterar usando un bucle y obtener acceso a cada DataTransferItemobjeto.
DataTransferItem tiene 2 propiedades de solo lectura:
  • kind: el tipo de elemento que se arrastra. Devuelve una cadena que contiene fileostring
  • type El tipo MIME del artículo
y tiene 2 métodos:
  • getAsFile()devuelve un Fileobjeto 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 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 se transfieren archivos, además de aparecer en la lista dataTransfer.items, se almacenan en la filespropiedad de dataTransfer.
Esta propiedad apunta a un FileListobjeto que enumera los archivos que se arrastran.
Echa un vistazo a esta demostración en Codepen:


No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas