Usando la API HTML5 Drag and Drop

La API HTML5 Drag and Drop (DnD) significa que podemos hacer que casi cualquier elemento de nuestra página sea arrastrable. En esta publicación explicaremos los conceptos básicos de Drag y soltar.

Creación de contenido que se puede arrastrar #

Vale la pena señalar que en la mayoría de los navegadores, las selecciones de texto, las imágenes y los enlaces se pueden arrastrar de forma predeterminada. Por ejemplo, si arrastra el En el logotipo de Google en la Búsqueda de Google, verá la imagen fantasma. La imagen se puede soltar en la barra de direcciones, en un elemento <input type="file" /> o incluso en el escritorio. Para hacer que otros tipos de contenido se puedan arrastrar necesitas usar las API de HTML5 DnD.

Para hacer que un objeto se pueda arrastrar, establece draggable=true en ese elemento. Casi cualquier cosa puede ser habilitada para arrastrar, imágenes, archivos , enlaces, archivos o cualquier marcado en su página.

En nuestro ejemplo, estamos creando una interfaz para reorganizar algunas columnas, que se han diseñado con CSS Grid. El marcado básico para mis columnas parece esto, con cada columna que tiene el

atributo establecido entrue.

Aquí está el CSS para mi contenedor y elementos de caja. Tenga en cuenta que el único CSS relacionada con la funcionalidad DnD está la propiedad cursor: move. El resto del código solo controla el diseño y el estilo del contenedor y los elementos de la caja.

En este punto, encuentra que puede arrastrar los elementos, sin embargo, no sucederá nada más. Para agregar la funcionalidad DnD, necesitamos usar la API de JavaScript.

Escuchar eventos de arrastre #

Hay una serie de diferentes eventos para adjuntar para monitorear todo el proceso de arrastrar y soltar.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

Para manejar el flujo de DnD, necesita algún tipo de elemento fuente (donde se origina el arrastre), el pa yload (lo que estás intentando soltar) y un objetivo (un área para atrapar la gota). El elemento fuente puede ser una imagen, lista, enlace, objeto de archivo, bloque de HTML, etc. El objetivo es la zona de colocación (o un conjunto de zonas de colocación) que acepta los datos que el usuario está intentando eliminar. Tenga en cuenta que no todos los elementos pueden ser objetivos, por ejemplo, una imagen no puede ser un objetivo.

Inicio y finalización una secuencia de arrastrar y soltar #

Una vez que tenga draggable="true" atributos definidos en su contenido, adjunte un dragstart controlador de eventos para iniciar la secuencia DnD para cada columna.

Este código establecerá la opacidad de la columna en un 40% cuando el usuario comience a arrastrarla, luego la devolverá al 100% cuando finalice el evento de arrastre.

El resultado se puede ver en la demostración de Glitch a continuación. Arrastra un elemento y se vuelve opaco. Como el destino del dragstart evento es el elemento de origen, establecer this.style.opacity en 40% le da al usuario retroalimentación visual de que el elemento es la selección actual que se está moviendo. Una vez que suelta el elemento, aunque la funcionalidad de colocar no está en su lugar, el elemento fuente vuelve al 100% de opacidad.

Agregue señales visuales adicionales con dragenter, dragover y dragleave #

Para ayudar al usuario a comprender cómo interactuar con su interfaz, use el dragenter, dragover y dragleave controladores de eventos. En este ejemplo, las columnas son destinos de colocación además de ser arrastrables. Ayuda al usuario para entender esto, haga que el borde sea discontinuo mientras sostienen un elemento arrastrado sobre una columna. Por ejemplo, en su CSS puede crear una clase over para representar elementos que son destinos de colocación:

Luego, en tu J avaScript configura los controladores de eventos, agrega la clase over cuando se arrastra la columna y la elimina cuando nos vamos. En el dragend handler también nos aseguramos de eliminar las clases al final del arrastre.

Hay un par de puntos que vale la pena cubrir en este código :

• En el caso de arrastrar algo como un enlace, debe evitar el comportamiento predeterminado del navegador, que es navegar a ese enlace. Para hacer esto, llame a e.preventDefault() en el evento dragover. Otra buena práctica es devolver false en ese mismo controlador.
• El controlador de eventos dragenter se usa para alternar la clase over en lugar de dragover .Si usas dragover, la clase CSS se alternaría muchas veces mientras el evento dragover continuaba activándose al desplazarse por una columna. eso causaría el renderizador del navegador para hacer una gran cantidad de trabajo innecesario. Mantener los redibujos al mínimo es siempre una buena idea.Si necesita usar el evento dragover para algo, considere limitar o eliminar los rebotes de su detector de eventos.

Completar el drop #

Para procesar la caída real, agregue un detector de eventos para el evento drop. En el controlador drop, deberá evitar El comportamiento predeterminado del navegador para las caídas, que suele ser una especie de redireccionamiento molesto. Puede evitar que el evento burbujee en el DOM llamando a e.stopPropagation().

Si ejecuta el código en este punto, el elemento no caerá en la nueva ubicación. Para lograr esto, debe usar el DataTransfer objeto.

La propiedad dataTransfer es donde ocurre toda la magia de DnD. Contiene los datos enviados en una acción de arrastre. dataTransfer se configura en el evento dragstart y se lee / maneja en el evento drop. Llamar a e.dataTransfer.setData(mimeType, dataPayload) le permite configurar el objeto «s Tipo MIME y carga útil de datos.

En este ejemplo, vamos a permitir que los usuarios reorganicen el orden de las columnas. Para hacer eso, primero debe almacenar el código HTML del elemento fuente cuando arrastre comienza:

En el drop evento que procesa la colocación de la columna, estableciendo el HTML de la columna de origen en el HTML de la columna de destino en la que soltó, primero verificando que el usuario no esté volviendo a soltar en la misma columna desde la que la arrastró.

Puede ver el resultado en la siguiente demostración. Arrastre y suelte la columna A en la parte superior de la columna B y observe cómo cambian de lugar:

Más propiedades de arrastre #

El objeto dataTransfer expone propiedades para proporcionar retroalimentación visual al usuario durante el proceso de arrastre. Estas propiedades también se pueden usar para controlar cómo se suelta cada destino responde a un tipo de datos en particular.

• dataTransfer.effectAllowed restric Es el «tipo de arrastre» que el usuario puede realizar en el elemento. Se utiliza en el modelo de procesamiento de arrastrar y soltar para inicializar el dropEffect durante el dragenter y dragover. La propiedad se puede establecer en los siguientes valores: none, copy, copyLink, copyMove, link, linkMove, move, all y uninitialized.
• dataTransfer.dropEffect controla los comentarios que el usuario recibe durante las dragenter y dragover eventos. Cuando el usuario se desplaza sobre un elemento de destino, el cursor del navegador indicará qué tipo de operación se llevará a cabo (p. ej. una copia, un movimiento, etc.). El efecto puede adoptar uno de los siguientes valores: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) significa que en lugar de usar el navegador » Como respuesta predeterminada de la «imagen fantasma», puede configurar opcionalmente un icono de arrastre.

Carga de archivo con arrastrar y soltar #

Este ejemplo simple usa una columna como arrastrar origen y arrastrar destino. Esto se puede ver en una interfaz de usuario donde se le pide al usuario que reorganice los elementos. En algunas situaciones, el destino de arrastre y la fuente pueden ser diferentes, como una interfaz donde el usuario necesita seleccionar una imagen para ser el imagen principal de un producto arrastrando la imagen seleccionada a un destino.

Arrastrar y soltar se utiliza con frecuencia para permitir a los usuarios arrastrar elementos desde su escritorio a una aplicación. La principal diferencia está en su drop controlador. En lugar de usar dataTransfer.getData() para acceder a los archivos, sus datos Estará contenido en la propiedad dataTransfer.files:

Puede encontrar más información sobre esto en Arrastrar y soltar personalizado.