Syllabus

HTML Drag & Drop API

Badar KhalilUpdated September 27, 2026 2 min read

HTML Drag & Drop API

The Drag and Drop API is a native browser feature that lets users grab an element with the mouse, drag it across the page, and drop it onto a target — no external library required. It powers file-upload dropzones, sortable to-do lists, kanban boards (like Trello), and image reordering tools.

Making an Element Draggable

Any HTML element becomes draggable simply by adding the draggable="true" attribute. Images and links are draggable by default in most browsers, but other elements need this attribute explicitly.

The Drag Event Lifecycle

dragstart — fired on the dragged element when the drag begins.
drag — fires continuously while dragging.
dragenter / dragover — fired on the drop target as the dragged item passes over it (you must call preventDefault() on dragover to allow dropping).
dragleave — fired when the dragged item leaves the drop target.
drop — fired on the target when the item is released; this is where you handle the actual data transfer.
dragend — fired on the original dragged element once the drag operation finishes.

Transferring Data with dataTransfer

The dataTransfer object carried by every drag event lets you attach data (like an element's ID or a piece of text) during dragstart, and read it back during drop — this is how the browser knows what was actually dragged.

Building a Drop Zone

A drop zone is just a normal element that listens for dragover (with preventDefault()) and drop. This same pattern is also used for native file uploads, where users drag files from their desktop directly into the browser.

Common Use Cases

Sortable lists, kanban/task boards, drag-to-upload file zones, image galleries with reordering, and visual page builders all rely on this API.

Try it Yourself HTML

<div id='drag1' draggable='true' style='width:100px;padding:10px;background:#3498db;color:#fff;'>Drag Me</div>

<div id='dropzone' style='width:200px;height:100px;border:2px dashed #999;margin-top:20px;'>Drop Here</div>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const dragItem = document.getElementById('drag1');
const dropZone = document.getElementById('dropzone');

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

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault(); // required to allow dropping
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const draggedId = e.dataTransfer.getData('text/plain');
  const draggedEl = document.getElementById(draggedId);
  dropZone.appendChild(draggedEl);
});

Output

Press Run to execute.

Exercise: Highlight the Drop ZoneJAVASCRIPT

Add a 'dragenter' listener on the drop zone that changes its background color to light green, and a 'dragleave' listener that resets it back to its original color.

Try it Yourself JAVASCRIPT

dropZone.addEventListener('dragenter', (e) => {
  // TODO: change background color
});

dropZone.addEventListener('dragleave', (e) => {
  // TODO: reset background color
});

Output

Press Run to execute.

Show expected output

Background turns light green on dragenter and resets on dragleave.

This is a self-check — compare your result with the expected output above.

Was this page helpful?