⚙️ Module 13 · HTML5 APIs🔴 AdvancedLESSON 44

Drag and Drop API

⏱️ 16 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress33%

🎯 What you'll learn: The draggable attribute and the drag event sequence — dragstart, dragover, and drop — used to build a sortable list.

Section 1

Making an Element Draggable

Any element becomes draggable by setting draggable="true". Most elements (images, links) are draggable by default; other elements need this set explicitly.

draggable-basic.html

HTML

<div draggable="true" id="item1">Drag me</div>

<div id="dropzone">Drop here</div>

Section 2

The Drag Event Sequence

Three events do the real work: dragstart fires on the item being dragged (used to store what's being moved), dragover fires continuously on the drop target (must call preventDefault() or dropping won't be allowed), and drop fires when the item is released over a valid target.

drag-events.html

HTML

<script>
const item = document.getElementById('item1');
const zone = document.getElementById('dropzone');

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

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

zone.addEventListener('drop', e => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  zone.appendChild(document.getElementById(id));
});
</script>

⚠️

Forgetting preventDefault() on dragover is the #1 bug

Without it, the browser's default behavior rejects the drop entirely and your drop event never fires — this trips up nearly everyone the first time.

Section 3

dataTransfer — Passing Data Between Events

The dataTransfer object carries information from dragstart to drop. setData(type, value) stores it; getData(type) retrieves it on the other end — this is how the drop handler knows which element was dragged.

Event	Fires on	Key responsibility
dragstart	The dragged element	Store data with dataTransfer.setData()
dragover	The drop target	Call preventDefault() to allow dropping
drop	The drop target	Read data with dataTransfer.getData() and act on it

🧩 Knowledge Check — Lesson 44

5 questions to test your understanding.

1. What attribute makes a non-default element draggable?

2. What must you call inside the dragover handler to allow dropping?

3. What does dataTransfer.setData() do?

4. On which element does the drop event fire?

5. What's the most common bug beginners hit with drag and drop?

💪

Coding Challenge — Lesson 44

Apply what you learned · Advanced Level

Challenge: Build a 2-Card Drag Swap

Build two draggable cards and one drop zone. Wire up dragstart, dragover (with preventDefault), and drop so dragging either card moves it into the drop zone.

💡 Show hints if you're stuck

Use dataTransfer.setData('text/plain', e.target.id) in dragstart.

Finished this lesson?

Mark it complete to track your progress.

Lesson 44 of 62Module 13 — HTML5 APIs

Drag and Drop API

Making an Element Draggable

The Drag Event Sequence

dataTransfer — Passing Data Between Events

Lesson 44 Complete!