Logo of UI Challenges
Sign in
Wireframe example for Long-Press Drag to Reorder
An example interpretation of the prompt
Icon of target

Long-Press Drag to Reorder

Icon of book open

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.

Icon of book open

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.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get a design challenge in your inbox

Daily UI prompts and challenge updates. It’s free.