Drag and drop
Design Pattern
Free weekly newsletter
Real UI patterns and design psychology in your inbox
Learn how successful products use UI patterns and behavioral design. One email a week from UI-Patterns.com and Learning Loop.
SubscribeProblem summary
The user needs to perform operations on one or more objects by moving them from one place to another.
Example
▲ Drag and drop upload call-out at Stamps and Sons
Usage
- Use when you want to let users to perform more complex tasks through direct manipulation – through a What-you-see-is-what-you-get (WYSIWYG) approach.
- Use when you want to avoid forcing the user to go to another page in order to re-arrange the layout
In the card deck
Drag and drop is one of the cards in the UI Patterns card deck
A collection of 60 User Interface design patterns, presented in a manner easily referenced and used as a brainstorming tool.
Solution
Let users pick up and rearrange content by dragging it across the screen
Rationale
Instinctively, many users try dragging and dropping objects in user interfaces. This conceptual metaphor with clear ties to the physical world provides a level of direct manipulation few methods can match. It is seen as one of the most effective ways to rearrange items in a list, move objects from one place to the other, or even upload files.
Discussion
As Drag and drop is not fully accessible you may want to consider supporting alternate ways to re-arrange your content modules.
