Drag and Drop
A direct-manipulation pattern where users move elements to reorder, sort, or transfer them — intuitive but only when affordances are clear.
Plain English
Drag and drop is one of the most satisfying interactions in UI design — picking something up and placing it somewhere else feels completely natural. The challenge is discoverability: users must know items are draggable before they try. Visual affordances like a grip icon (⠿), a subtle dotted border, or a "drag to reorder" hint are essential. The pattern has four states: idle (item at rest), dragging (item lifted, semi-transparent, placeholder left behind), hovering (target highlights to show where it will drop), and dropped (item snaps into position).
Technical
HTML5 Drag API: add draggable="true" to items. onDragStart: record dragIndex, set e.dataTransfer.effectAllowed = "move". onDragOver: call e.preventDefault() (required to allow drop), track hoverIndex. onDrop: reorder array, clear state. onDragEnd: clear all drag state. Visual: opacity: 0.4 on dragged item, outline: 2px dashed accent on drop target. For mobile: use pointer events or touch events (touchstart, touchmove, touchend) with manual position calculation.
Live Demo
Drag to reorder
↕ Grab the handle to reorder items
Show a grip handle — never make users guess that items are draggable.
Usage
✓ Good usage
A kanban board where cards can be dragged between columns with a dotted drop zone appearing when a card hovers over a new column.
✗ Bad usage
A photo gallery with no visible drag affordance — users accidentally trigger drag on long-press instead of the expected scroll.
Recommended values
- Dragged item opacity: 0.4–0.5
- Drop target: dashed 2px accent border
- Cursor: grab (idle), grabbing (dragging)
- Placeholder gap: match item height
- Min drag distance before pickup: 4–8px
- Animate item repositioning: 200ms ease
Common mistakes
- Missing e.preventDefault() in onDragOver — drop events never fire without it.
- No visual placeholder — users lose track of where the item will go.
- Desktop-only implementation — touch devices need separate handling or a library.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add drag-to-reorder to the task list. Make each task item draggable with a grip icon on the left. Show a semi-transparent copy of the item while dragging, leave a dotted placeholder where it came from, and highlight the drop zone with a dashed accent border. Animate the reorder with a 200ms slide.