08 Drag Snap. 8 of 95.
08/GESTURE PHYSICS/8 of 95
Drag Snap
Precision can be supplied by the interface.
The problem
Dropping something exactly in place takes careful aim, and a few pixels off looks messy and misaligned.
The solution
Nearest valid destination attracts and snaps the object.
Experiment
Play with the values
80px
0.8
How it works
- While the object is dragged, its position is compared with the places it is allowed to land.
- Distance to each valid zone is measured continuously.
- The nearest zone that can accept the object becomes the candidate.
- Once the object is within the snap threshold, it is pulled to that zone instead of requiring a perfect drop.
- The settle is animated so the correction feels like assistance, not a teleport.
Seen in
Kanban boards
Cards snap into the nearest column when released, even if you didn't land perfectly.
Calendar scheduling
Events pull toward valid time slots as you drag near them.
File upload zones
Dropped files magnetize to the upload target when your pointer is close enough.
Layout builders
Components snap to grid positions or drop zones so placement feels precise without pixel hunting.