Logo of UI Challenges
Sign in
Wireframe example for Drag and drop
An example interpretation of the prompt
Icon of target

Drag and drop

Icon of book open

Design a drag-and-drop workspace for rearranging a list of items. Treat this as a real product surface, not a demo: users need to see what can be dragged, where it can land, and what happens while they move it around.

Show the default list state, the lifted item state, and the active drop target state. Make the insertion point obvious as the user drags. If the item can be moved between groups or columns, show at least one cross-container drop state so the rules are clear.

Include the important interaction outcomes: successful drop, invalid drop, and cancel/revert. Keep the original item context visible during drag, and make the final reordered result easy to scan after the action completes.

Icon of book open

Make your 'Drag and Drop' design delightful by animating the 'lift' and 'drop' moments. Subtle scale changes or shadow adjustments can significantly enhance the user experience and make the interaction feel alive.

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.