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.

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.