Problem summary

The user needs to perform operations on one or more objects by moving them from one place to another.

Example

stampsandsons.com

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

This card is part of the UI Patterns printed card deck

A collection of 54 User Interface design patterns, presented in a manner easily referenced and used as a brainstorming tool.

Get your deck!

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.


User Interface Design Patterns