17 / GESTURE PHYSICS
Drag Overlay
The problem
When a dragged item is clipped by its parent's overflow or z-index, it disappears behind other content mid-drag.
The solution
A drag overlay floats above all content with grab-point offset and coordinates frozen against parent scroll.
Experiment
Task: Drag an item toward the edge of its container.
NAIVE
Scrollable container
- Research
- Wireframes
- Prototype
- Handoff
strategyin-container
clippedTRUE
THOUGHTFUL
Scrollable container
- Research
- Wireframes
- Prototype
- Handoff
strategyportal overlay
clippedFALSE
Play with the values
1.05
0px
0px
How it works
Seen in
Kanban boards
Cards dragged between columns float above scroll containers instead of being clipped.
File managers
A dragged file preview stays visible over panels and sidebars during the move.
Sortable lists
The lifted row renders on top while its slot animates in the underlying list.
Dashboard widgets
Rearranging tiles shows a clean overlay that isn't hidden behind neighbours.