Overview
Grab a page section by its handle, make neighboring rows move as it passes, and settle the new order before confirming it was saved.
Build
- 01
Approach the handle and pause before pickup.
- 02
Change to a grabbing hand; lift the card without moving the hotspot off its handle.
- 03
Move neighboring rows individually as the dragged card crosses them.
- 04
Release, settle into the final slot and move the pointer aside.
Example source React / TSX
examples/focus-drag-and-drop.tsx · Uses the catalog’s shared composition helpers.
Loading source…