HTML Drag/Drop

HTML Drag and Drop: Building Interactive Reorder and Drop Zones

The HTML Drag and Drop API lets visitors grab an element with a pointer and drop it onto a target container—ideal for Kanban boards, file upload drop zones, and sortable lists. You enable dragging with a single HTML attribute (draggable="true") and wire the transfer using JavaScript events.

The Core Drag-and-Drop Lifecycle

Three events drive a standard drag-and-drop workflow:

1. dragstart: Fires when dragging begins. Store the dragged element's ID inside event.dataTransfer.setData('text/plain', id).
2. dragover: Fires continuously while hovering over a drop zone. You must call event.preventDefault() inside dragover, because browsers block dropping by default.
3. drop: Fires when the user releases the mouse over the target. Read the ID via event.dataTransfer.getData('text/plain') and append or process the item.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Drag and Drop Demo</title>
    <style>
        .board { display: flex; gap: 16px; font-family: system-ui, sans-serif; }
        .zone { width: 180px; min-height: 110px; padding: 12px; border: 2px dashed #94a3b8; border-radius: 8px; }
        .task { padding: 10px; background: #2563eb; color: #fff; border-radius: 6px; cursor: grab; }
    </style>
</head>
<body>
    <div class="board">
        <div class="zone" id="todo">
            <div id="task-1" class="task" draggable="true">Write HTML Tests</div>
        </div>
        <div class="zone" id="done">Drop here for Done</div>
    </div>

    <script>
        const task = document.getElementById('task-1');
        const zones = document.querySelectorAll('.zone');

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

        zones.forEach((zone) => {
            zone.addEventListener('dragover', (e) => e.preventDefault());
            zone.addEventListener('drop', (e) => {
                e.preventDefault();
                const id = e.dataTransfer.getData('text/plain');
                const dragged = document.getElementById(id);
                if (dragged) zone.appendChild(dragged);
            });
        });
    </script>
</body>
</html>

Common Mistakes to Avoid

• Forgetting e.preventDefault() in dragover: Without that single line, the drop event will never fire on the target box.
• Relying only on drag-and-drop without keyboard buttons: Native HTML5 drag events do not support keyboard Tab/Arrow users or all mobile touch screens—always provide a "Move" button or a file upload input fallback.
• Neglecting e.preventDefault() inside drop: In Firefox, skipping preventDefault() on drop can cause the browser to treat dragged text as a URL redirect.

Frequently Asked Questions

Which HTML elements are draggable by default?

Text selections, img elements, and links (a with href) are draggable by default; any other element needs draggable="true".

How do I handle dropped desktop files on a drop zone?

Read event.dataTransfer.files inside the drop event listener after calling event.preventDefault() on both dragover and drop.