
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.
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.
Get a design challenge in your inbox
Daily UI prompts and challenge updates. It’s free.