Drag and Drop en JavaScript

En este artículo vamos a explicar el sistema Drag and Drop (arrastrar y soltar) en JavaScript que permite a los usuarios mover elementos dentro de una página web de manera interactiva. Es muy útil para interfaces como organizadores de tareas, carga de archivos y editores visuales. Esto permite al usuario mover elementos dentro de una interfaz gráfica arrastrándolos con el puntero del ratón (o dedo en pantallas táctiles) y soltándolos en otra parte de la página.

Introducción a Drag and Drop

El sistema Drag and Drop o arrastrar y soltar elementos HTML, se basa en eventos JavaScript que permiten iniciar, mover y finalizar la acción de arrastre. Si quieres profundizar más sobre los eventos en JavaScript puedes leer el artículo EventTarget, que pertenece a la serie Dispositivos apuntadores en JavaScript.

Los pasos para configurar una página web mediante el sistema Drag and Drop (arrastrar y soltar) en JavaScript se basa en eventos nativos de HTML5 que permiten:

Convertir elementos en objetos «arrastrables».
Detectar las zonas de destino donde se puede soltar.
Ejecutar acciones cuando un elemento es soltado.

Elementos HTML/CSS necesarios

Para que el sistema Drag and Drop de JavaScript funcione, en el HTML se deben especificar los elementos «arrastrables» y las zonas «receptoras» de estos elementos. Para ello debemos hacer lo siguiente.

Elemento arrastrable: debe tener el atributo draggable="true"
Elemento receptor: puede ser cualquier contenedor que actúe como «zona de caída» (dropzone)

  <div id="dragItem" class="draggable" draggable="true">Arrástrame</div>
  <div id="dropZone" class="dropzone">Suelta aquí</div>

Un sistema Drag and Drop funciona únicamente con JavaScript, pero el CSS puede ser útil, sobretodo para dar estilo visual al estado de los elementos, por ejemplo:

    .draggable {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      user-select: none;
    }
    .dropzone {
      width: 200px;
      height: 200px;
      border: 2px dashed #2ecc71;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 50%;
    }

Eventos Drag and Drop

Para que un sistema Drag and Drop funcione, JavaScript proporciona diferentes eventos clave para manejar el arrastre y la colocación de los elementos:

dragstart: Se dispara cuando el usuario comienza a arrastrar un elemento.
drag: Se dispara mientras el usuario está arrastrando el elemento.
dragenter: Se dispara cuando el elemento arrastrado entra en una zona de destino válida.
dragover: Se dispara continuamente mientras el elemento se mantiene sobre la zona de destino.
dragleave: Se dispara cuando el elemento sale de una zona de destino.
drop: Se dispara cuando el usuario suelta el elemento en una zona de destino válida.
dragend: Se dispara cuando el arrastre ha finalizado (independientemente de si fue exitoso o no).

Estos eventos proporcionan la información suficiente para controlar todo lo que ocurre desde que el usuario selecciona un elemento arrastrable hasta que lo suelta. Pero básicamente podemos ejecutar todo el proceso con 3 eventos claves:

    const dragItem = document.getElementById("dragItem");
    const dropZone = document.getElementById("dropZone");

    dragItem.addEventListener("dragstart", (event) => {
      event.dataTransfer.setData("text/plain", event.target.id);
    });

    dropZone.addEventListener("dragover", (event) => {
      event.preventDefault(); // Necesario para permitir soltar
    });

    dropZone.addEventListener("drop", (event) => {
      event.preventDefault();
      const itemId = event.dataTransfer.getData("text/plain");
      const draggedItem = document.getElementById(itemId);
      dropZone.appendChild(draggedItem);
    });

En este código de ejemplo realizamos los siguientes pasos:

Se establece draggable="true" en el elemento a arrastrar.
Se escucha el evento dragstart para almacenar el ID del elemento arrastrado.
En la zona de soltado (dropzone), se previene el comportamiento predeterminado con event.preventDefault() en dragover.
En drop, se recupera el ID del elemento arrastrado y se mueve el elemento al nuevo contenedor.

Código de ejemplo completo

Este es el código de ejemplo, completo y funcional, donde se muestra cómo arrastrar un elemento HTML y soltarlo en un área específica de la página web.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drag and Drop</title>
  <style>
    html {
      background-color: aliceblue;
    }
    body {
      width: 80%;      
      margin: auto;
      padding: 2em;
      overflow: hidden;         
      background-color: beige;
    }
    .draggable {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      user-select: none;
    }
    .dropzone {
      width: 200px;
      height: 200px;
      border: 2px dashed #2ecc71;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 50%;
    }
  </style>
</head>

<body>
  <h1>Drag and drop</h1>
  <p>Este es un ejemplo de cómo usar las características de Drag and Dop de JavaScript</p>
  <div id="dragItem" class="draggable" draggable="true">Arrástrame</div>
  <div id="dropZone" class="dropzone">Suelta aquí</div>

  <script>
    const dragItem = document.getElementById("dragItem");
    const dropZone = document.getElementById("dropZone");

    dragItem.addEventListener("dragstart", (event) => {
      event.dataTransfer.setData("text/plain", event.target.id);
    });

    dropZone.addEventListener("dragover", (event) => {
      event.preventDefault(); // Necesario para permitir soltar
    });

    dropZone.addEventListener("drop", (event) => {
      event.preventDefault();
      const itemId = event.dataTransfer.getData("text/plain");
      const draggedItem = document.getElementById(itemId);
      dropZone.appendChild(draggedItem);
    });
  </script>
</body>
</html>