Interactions · Drag and drop
Drag to Reorder
Also called: Sortable list, Drag-and-drop reordering, Reorderable list
Press and hold a list item, drag it to a new spot, and let go to change the order. Common for to-do items, menu setup, and photo order.
In detail
Drag to reorder is a special case of drag and drop: the drag and the drop both happen in the same list, and the goal is to change the order. You'll see it in to-do lists, nav menu settings, photo albums, and cards within one column of a kanban board.
A few details make it work well. Give each item a "drag handle" icon (six dots or three lines) to show it can be dragged. While dragging, give the item a shadow or make it semi-transparent, and leave a dashed placeholder where it was. The other items slide smoothly out of the way. When the user lets go, save the new order to the backend, and restore the old order if that fails.
On phones, dragging usually starts with a long press so it doesn't fight with page scrolling. It's also good to offer "Move up / Move down" buttons or keyboard controls as an alternative. Common libraries are dnd-kit and SortableJS.
Developer infoTerm ID, DOM cues, match priority
- Term ID
interaction-drag-sort- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026