Gallery
See what others have created
llvchi
@llvchi
Reordering
Design a reordering interaction for a list, board, or table where users can change item order without losing context. Pick one surface and make the movable affordance clear before the drag starts: handle, grip, or explicit reorder control. Show the full move sequence. The item should lift from the list, the gap or placeholder should mark the target position, and nearby items should shift in a way that is easy to track. If the interaction supports keyboard or button-based reordering, show that path too, not just drag-and-drop. After drop, update the order immediately and keep the result visible. Include an undo affordance in the confirmation state so a bad move can be reversed fast. If some items cannot be moved, show why and keep that limitation visible in the list instead of hiding it.
What to deliver
- Design a reorderable list or card stack with clear drag handles.
- Show the item being moved, the drop target, and the insertion point while dragging.
- Include a non-drag path for reordering, such as move up/down controls or a keyboard flow.
- Add a post-drop confirmation state with undo.
- Design one empty or disabled state for when reordering is unavailable.
Make reordering fun by adding subtle animations when elements are picked up and placed down. This not only delights users but also helps indicate the actions taken, creating a more intuitive interaction.