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

  1. Add draggable="true" to the HTML element you want to make draggable.
  2. Use JavaScript to handle drag events like dragstart, dragover, and drop.
  3. Define valid drop zones and prevent default behavior to allow dropping.

✅ Example: Drag and Drop Demo


🎯 Key Events in Drag and Drop

EventDescription
dragstartTriggered when the drag starts
dragoverFired continuously while dragging over target (use e.preventDefault() here)
dropFired when the element is dropped
dragenterFired when dragged element enters target
dragleaveFired 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