Logo of UI Challenges
Sign in

Gallery

See what others have created

Long-Press Drag to Reorder

esakki

@esakki

HardGestures

Long-Press Drag to Reorder

Design the resting state of a mobile list that supports long-press reordering. It could be a playlist, task list, or saved items list, but the core pattern is the same: rows are draggable only after a press-and-hold.

The default row needs to read like a normal list item first, with enough structure to understand what can be moved and where the handle or grab zone lives. The reorder affordance should feel native to mobile, not like a desktop drag handle pasted onto a phone.

Then show the active drag state: the picked-up item, the gap it leaves behind, and how nearby rows shift to make room. The interaction should make position changes easy to track while the finger is down.

This is interesting because the UI has to communicate two modes at once: browse mode and rearrange mode. The design needs to make the transition obvious without making the list look noisy when nothing is being moved.

What to deliver

  • Design the default list row state with reorder affordance.
  • Design the pressed/dragging state for the active item.
  • Design the insertion gap and row shift behavior while dragging.
  • Design any subtle helper text or affordance for first-time users.
  • Design the cancel/drop behavior when the finger lifts or leaves the list.

Make the dragged row feel lifted with a clear shadow and slight scale change, but keep its content intact so the user never loses track of what they picked up.