Two ways to drag
The web offers the native HTML drag and drop API for dragging files and items between regions, and pointer based dragging built from pointer events for fine control over reordering lists.
- Native drag and drop is great for files and cross window drops
- Pointer based dragging gives smooth reordering and custom visuals
- Many libraries use pointer dragging for sortable lists
The lifecycle
A drag has a clear lifecycle that your code must track to update the layout correctly.
- Start when the pointer moves past a threshold on a handle
- Move updates a placeholder showing where the item will land
- End commits the new order or cancels and restores
Drag lifecycle
Accessibility
A mouse only drag locks out keyboard users. Provide a keyboard alternative that picks up an item, moves it with arrow keys, and drops it, and announce changes through a live region so screen reader users follow along.
Key idea
Choose native drag and drop for files and pointer based dragging for reordering, model the start move end lifecycle with a placeholder, and always offer a keyboard path with live announcements.