HTML & CSS
/Advanced
Drag & Drop API
Definition
HTML5 Drag and Drop (DnD) allows users to click and hold an object, drag it to another location, and drop it.
Explain Like I'm New
It's the native browser system for moving elements around. You make an element draggable by setting `draggable="true"`. Then you use JavaScript events to track when it's picked up, when it hovers over a 'drop zone', and when it's finally dropped.
Real World Example
Trello boards. You click a task card, drag it across the screen, and drop it into a new column.
Common Use Cases
- •Kanban boards
- •File upload zones (Drag files here)
- •Reordering lists
Interactive Example
Interview Questions
basic
- What HTML attribute makes an element draggable?
intermediate
- Why do you need to call `event.preventDefault()` in the `ondragover` event?