HTML Drag/Drop

HTML Drag and Drop API: Building Interactive Drag-and-Drop UIs

The HTML Drag and Drop API allows users to click, drag, and drop elements between different containers on a web page, enabling interactive Kanban boards, file drop zones, and element reordering.

Drag and Drop Events and Syntax

To make an element draggable, set draggable="true" and handle key drag/drop events:

<!-- Draggable Element -->
<div draggable="true" ondragstart="handleDragStart(event)">Drag Me</div>

<!-- Drop Zone Container -->
<div ondragover="event.preventDefault()" ondrop="handleDrop(event)">Drop Here</div>

Key drag and drop events:

1. ondragstart: Fires on the target element when the user starts dragging.
2. ondragover: Fires continuously on the drop target while an item is dragged over it (must call event.preventDefault() to allow dropping).
3. ondrop: Fires on the drop target when the user releases the dragged element.
4. dataTransfer: Event object property used to store and transfer dragged data payload (event.dataTransfer.setData()).

Drag and Drop Event Cycle

flowchart TD
    A["User Drags draggable='true' Element"] --> B["ondragstart: Save Data to event.dataTransfer"]
    B --> C["User Drags Over Drop Zone"]
    C --> D["ondragover: event.preventDefault() (Allows Drop)"]
    D --> E["User Releases Mouse"]
    E --> F["ondrop: Read dataTransfer & Append Element to Drop Zone"]

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Drag and Drop Example</title>
    <style>
        .box { width: 100px; height: 100px; background-color: #38bdf8; border-radius: 8px; cursor: move; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #0f172a; }
        .dropzone { width: 200px; height: 150px; background-color: #1e293b; border: 2px dashed #334155; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
    </style>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">

    <h2>Kanban Drag and Drop Demo</h2>

    <div style="display: flex; gap: 2rem; align-items: center;">
        <div id="dragItem" class="box" draggable="true">Card</div>
        <div id="dropContainer" class="dropzone">Drop Zone</div>
    </div>

    <script>
        const item = document.getElementById("dragItem");
        const zone = document.getElementById("dropContainer");

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

        zone.addEventListener("dragover", (e) => {
            e.preventDefault(); // Required to enable drop
        });

        zone.addEventListener("drop", (e) => {
            e.preventDefault();
            const id = e.dataTransfer.getData("text/plain");
            const dragged = document.getElementById(id);
            zone.appendChild(dragged);
            zone.style.borderColor = "#34d399";
        });
    </script>

</body>
</html>

Best Practices

• Always call event.preventDefault() inside dragover: Browsers block file and element dropping by default; calling preventDefault() enables dropping.
• Provide clear visual drop target feedback: Change border colors or opacity when an item is dragged over a valid drop zone.
• Support touch events for mobile devices: Native HTML drag-and-drop lacks full touch screen support; pair with touch event handlers on mobile viewports.

Self-Check Challenge

Create a <div> element with draggable="true" and an ondragstart handler saving data via event.dataTransfer.setData()!