13 Drag Overlay. 13 of 95.
13/GESTURE PHYSICS/13 of 95
Drag Overlay
The thing you drag should not be trapped by its container.
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
Play with the values
1.05
0px
0px
How it works
- Picking up an item should not leave it clipped by the list that contains it.
- The item is snapshotted into an overlay at the moment of pickup.
- The overlay renders above all other content.
- A grab offset keeps the pointer where it was on the item, not snapped to the corner.
- The overlay's origin is frozen against parent scroll so the item does not jump when the list moves.
- A placeholder stays in the list so the layout still has a gap.
- Drop removes the overlay and reconciles the real item into its new place.
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.