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

Drag-to-Reorder Grid

Icon of book open

Design a mobile home screen-like grid where items can be rearranged by touch and hold, then drag. The grid may be app icons or photo tiles, but it should feel native to a phone: tight spacing, thumb reach, and motion that follows the finger.

The default state should make the grid look settled, not editable yet. Once an item is picked up, the dragged tile needs to stand apart from the rest without breaking the sense of place in the grid.

As the user moves the item, nearby tiles should shift to show the new slot before the drop happens. The challenge is to make the movement legible in a dense layout, where several items may be displaced at once.

Include the small cues that teach the gesture: how a tile is selected, what happens to the original position, and how the user knows the reorder is still in progress. Keep the interaction fast and tactile rather than modal.

Icon of book open

Use one strong lift treatment for the grabbed tile, then make the surrounding tiles move just enough to imply the target slot; too much animation makes the grid hard to read.

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 design challenge updates in your inbox

New prompts and challenge updates. It’s free.