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 kit de herramientas de desarrollo web.
Tabla de contenido
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 pueden mover con el 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 atributo HTML arrastrable establecido en verdadero, como este:
<div draggable="true">This element is draggable</div>
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 detector de eventos de arrastre dragstart como este:
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 método setDragImage 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 los eventos dragenter y dragover, así:
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 interfaz DragEvent 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 en la interfaz DragEvent.
- 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.
- dragleave: 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, el evento se activa.
- dragstart: el evento se activa al inicio de una operación de arrastre.
- soltar: 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 los eventos dragstart o dragend.
DragEvent puede resultar útil si desea enviar un evento de arrastre personalizado mediante programación. Por ejemplo, si desea que un div active eventos de arrastre personalizados al cargar la página, así es como se hace. Primero, cree un nuevo DragEvent() personalizado como este:
const customDragStartEvent = new DragEvent('dragstart', {
dataTransfer: new DataTransfer(),
})const customDragEndEvent = new DragEvent('dragend');
En el bloque de código anterior, customDragStartEvent representa una instancia de DragEvent(). En customDragStartEvent, 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 clave de transferencia de datos que representa una instancia de DataTransfer, sobre la 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 método setData en la propiedad dataTransfer en el objeto de evento. Ahora puedes activar eventos personalizados como este:
draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);
Transferir datos con dataTransfer
El objeto dataTransfer 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, utilizará el método setData() proporcionado por el objeto dataTransfer. 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, setData() 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, puedes recuperar los datos transferidos usando el método getData():
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ó utilizando el método setData() anteriormente. 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 e 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.