Cómo utilizar la API HTML de arrastrar y soltar

Arrastrar y soltar es una característica esencial que mejora la interacción del usuario y facilita una experiencia de usuario perfecta. Ya sea que esté buscando crear un cargador de archivos, una lista ordenable o un juego interactivo, Comprender cómo aprovechar las capacidades de esta API es una habilidad crucial que debe tener en su sitio web. kit de herramientas de desarrollo.

Los conceptos básicos de arrastrar y soltar en HTML

En un sistema típico de arrastrar y soltar, hay dos tipos de elementos: el primer tipo comprende elementos arrastrables que los usuarios se puede mover con un mouse, y el segundo tipo incluye elementos desplegables que generalmente especifican dónde los usuarios pueden colocar un elemento.

Para implementar arrastrar y soltar, debe decirle al navegador qué elementos desea que se puedan arrastrar. Para que el usuario pueda arrastrar un elemento, ese elemento debe tener un arrastrableatributo HTML ajustado a verdadero, como esto:

<divdraggable="true">This element is draggablediv>

Cuando el usuario comienza a activar un evento de arrastre, el navegador proporciona una imagen "fantasma" predeterminada que normalmente proporciona información sobre un elemento que se está arrastrando.

Puede personalizar esta imagen proporcionando su propia imagen. Para hacer esto, seleccione el elemento que se puede arrastrar desde el DOM, cree una nueva imagen para representar la imagen de comentarios personalizada y agregue un Arrastrar inicio arrastre el detector de eventos de esta manera:

let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
 event.dataTransfer.setDragImage(img, 10, 10);
})

En el bloque de código anterior, el establecerArrastrarImagen El método tiene tres parámetros. El primer parámetro hace referencia a la imagen. Los otros parámetros representan los desplazamientos horizontal y vertical de la imagen respectivamente. Cuando ejecuta el código en el navegador y comienza a arrastrar un elemento, notará que la imagen de arrastre personalizada ha sido reemplazada por la imagen personalizada configurada anteriormente.

Si desea permitir una caída, debe evitar el comportamiento predeterminado cancelando tanto el dragenter y dragover eventos, como este:

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

Comprender la interfaz DragEvent

JavaScript presenta una Arrastrar evento interfaz que representa una interacción de arrastrar y soltar por parte del usuario. A continuación se muestra una lista de posibles tipos de eventos bajo el Arrastrar evento interfaz.

• arrastrar: El usuario activa este evento mientras arrastra un elemento.
• dragend: Este evento se activa cuando finaliza la operación de arrastre o cuando el usuario la interrumpe. Una operación de arrastre típica puede finalizar soltando el botón del mouse o presionando la tecla Escape.
• dragenter: Un elemento arrastrado desencadena este evento cuando ingresa a un destino de colocación válido.
• arrastrar dejar: Cuando el elemento arrastrado abandona un destino de colocación, este evento se activa.
• dragover: Cuando el usuario arrastra un elemento arrastrable sobre un destino de colocación, se activa el evento.
• Arrastrar inicio: El evento se activa al inicio de una operación de arrastre.
• gota: El usuario activa este evento cuando suelta un elemento en un objetivo de colocación.

Al arrastrar un archivo al navegador desde un entorno fuera del navegador (por ejemplo, el administrador de archivos del sistema operativo), el navegador no activa la Arrastrar inicio o dragend eventos.

Arrastrar evento Puede resultar útil si desea enviar un evento de arrastre personalizado mediante programación. Por ejemplo, si quieres un div Para activar eventos de arrastre personalizados al cargar la página, así es como se hace. Primero, crea una nueva costumbre. ArrastrarEvento() como esto:

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

En el bloque de código anterior, personalizadoDragStartEvent representa una instancia de ArrastrarEvento(). En personalizadoDragStartEvent, hay dos argumentos de constructor. El primero representa el tipo de evento de arrastre, que puede ser uno de los siete tipos de eventos mencionados anteriormente.

El segundo argumento es un objeto con una transferencia de datos clave que representa una instancia de Transferencia de datos, sobre el cual aprenderá más adelante en esta guía. A continuación, tome el elemento desde el que desea activar el evento, desde el Modelo de objetos de documento (DOM).

const draggableElement = document.querySelector("#draggable");

Luego agregue, a los oyentes de eventos les gusta esto:

 draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
 event.dataTransfer.setData('text/plain', 'Hello, world!'); 
 });
 draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
 });

En el primer detector de eventos anterior, la función de devolución de llamada registra el texto "¡Arrastrado iniciado!" e invoca el establecer datos método en el transferencia de datos propiedad en el evento objeto. Ahora puedes activar eventos personalizados como este:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Transferir datos con dataTransfer

El transferencia de datos El objeto sirve como puente entre el elemento de origen (el elemento que se puede arrastrar) y el elemento de destino (el área que se puede soltar) durante una operación de arrastrar y soltar. Actúa como un contenedor de almacenamiento temporal para los datos que desea compartir entre estos elementos.

Estos datos pueden adoptar varias formas, como texto, URL o tipos de datos personalizados, lo que los convierte en una herramienta versátil para implementar una amplia gama de funciones de arrastrar y soltar.

Usando setData() para empaquetar datos

Para transferir datos de un elemento que se puede arrastrar a uno que se puede soltar, usará el establecer datos() método proporcionado por el transferencia de datos objeto. Este método le permite empaquetar los datos que desea transferir y especificar el tipo de datos. Aquí hay un ejemplo básico:

element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Cuando un usuario comienza a arrastrar el elemento especificado, establecer datos() empaqueta el texto "¡Hola, mundo!" con el tipo de datos Texto sin formato. Estos datos ahora están asociados con el evento de arrastre y el destino desplegable puede acceder a ellos durante la operación de colocación.

Recuperar datos con getData()

En el extremo receptor, dentro del detector de eventos de un elemento desplegable, puede recuperar los datos transferidos utilizando el obtener datos() método:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

El bloque de código anterior recupera los datos con el mismo tipo de datos (Texto sin formato) que se configuró usando el establecer datos() método anterior. Esto le permite acceder y manipular los datos transferidos según sea necesario dentro del contexto del elemento desplegable.

Casos de uso para interfaces de arrastrar y soltar

Integrar la funcionalidad de arrastrar y soltar en sus aplicaciones web puede ser una mejora poderosa, pero es esencial comprender cuándo y por qué debe implementarla.

• Cargadores de archivos: Permitir a los usuarios arrastrar archivos directamente desde su escritorio o administrador de archivos a un área de colocación designada simplifica el proceso de carga.
• Listas ordenables: si su aplicación incluye listas de elementos, como listas de tareas, listas de reproducción o galerías de imágenes, los usuarios podrían apreciar la posibilidad de reordenar elementos mediante arrastrar y soltar.
• Paneles interactivos: Para herramientas de visualización de datos y generación de informes, arrastrar y soltar puede ser una forma poderosa para que los usuarios personalicen sus paneles reorganizando widgets y gráficos.

Teniendo en cuenta la accesibilidad

Si bien arrastrar y soltar puede ser visualmente atractivo y mejorar la experiencia del usuario, es crucial garantizar que su implementación siga siendo accesible para todos los usuarios, incluidos aquellos con discapacidades. Proporcione métodos alternativos de interacción, como controles de teclado, para que su aplicación sea inclusiva.