HTML5 Drag and Drop API

05 March 2025

Himanay Khajuria

Making Web Elements Movable with Ease!

• The Drag and Drop API allows users to click, drag, and drop elements from one place to another on a web page.
• It helps in making interactive and user-friendly websites.
• Example: Moving files into a folder, dragging items into a shopping cart, rearranging elements on a webpage.

What is Drag and Drop API?

How It Works? (Basic Flow)

1️⃣ Drag the element: The user picks up the item.

2️⃣ Store the element’s data: The browser keeps track of what’s being dragged.

3️⃣ Drop the element: The user places it in the drop area.

Key Events in Drag and Drop API

Step 1: Make an Element Draggable

• Use the draggable attribute to make an element draggable:

Step 2: Detect When Dragging Starts

• Use the dragstart event to save data about the dragged element:

Step 3: Allow Dropping

• Use the dragover event and prevent the default behavior:

​

Step 4: Handle the Drop

• When the item is dropped, use the drop event to move it:

EXA

MPLE

Real-World Uses

• File Uploads (Dragging files into a box)
• Task Management (Trello, Asana, Jira)
• Reordering Lists (Drag & drop sorting)
• Image Gallery Management (Rearranging photos)

Summary

• The Drag and Drop API lets users move elements on a webpage.
• We use JavaScript events like dragstart, dragover, and drop.
• preventDefault() is needed to allow dropping.
• It's used in file uploads, task management, and UI design.

​

Thank

You