24 Closest-edge Reordering. 24 of 95.
24/GESTURE PHYSICS/24 of 95
Closest-edge Reordering
Insertion follows the nearest edge, not the pointer center.
Best experienced with a pointer.
The problem
Center-based drop indexes flip repeatedly as the pointer drifts across an item, making the insertion line jitter.
The solution
Nearest-edge hit testing picks a stable insertion slot while dragging.
Experiment
Play with the values
0.5
2px
How it works
- A list drag begins with the pointer over some item.
- The item under the pointer is found, including the gaps around it.
- Distance to that item's top and bottom edges is measured.
- The closer edge becomes the insertion slot, which is more stable than using the pointer's center.
- The indicator can also sit after the last item, so the end of the list is a real target.
- The new order commits when the pointer is released.
Seen in
Sortable to-do lists
Insertion lines stay put above or below a row instead of thrashing mid-item.
Sidebar navigation
Reordering pages uses edge slots so drop feedback remains predictable.
Media playlists
Tracks insert cleanly between neighbors without rapid index flips.
Form field builders
Dragging fields between sections uses closest-edge placement for clarity.