HTML Drag and Drop
Subject: html
🖱️ HTML Drag and Drop
The HTML Drag and Drop API enables users to click and drag elements and drop them into different areas on a web page. It's widely used in features like:
- 📁 File uploads
- 📝 Kanban boards
- 🔀 Sorting lists
- 🧩 Custom interactive UIs
🔄 How HTML Drag and Drop Works
- Add
draggable="true"
to the HTML element you want to make draggable. - Use JavaScript to handle drag events like
dragstart
,dragover
, anddrop
. - Define valid drop zones and prevent default behavior to allow dropping.
✅ Example: Drag and Drop Demo
🎯 Key Events in Drag and Drop
Event | Description |
---|---|
dragstart | Triggered when the drag starts |
dragover | Fired continuously while dragging over target (use e.preventDefault() here) |
drop | Fired when the element is dropped |
dragenter | Fired when dragged element enters target |
dragleave | Fired when dragged element leaves target |
📦 Use Cases
- Rearranging items in a to-do list or kanban board
- Drag-and-drop file uploads
- Sorting photos or media
- UI builders and layout editors
🧠 Key Takeaway
- Use
draggable="true"
on elements you want to drag - Use JS events (
dragstart
,dragover
,drop
) to control behavior - Enables intuitive and interactive UI design
- Built into HTML5 — no external libraries required
Advertisement Slot 1
Advertisement Slot 2