Problem Summary

The user needs a way to visually change the order or manipulate the position of elements on the screen.

Solution

Provide drag and drop capability on the page, so that the user can use a mouse gesture or keyboard key-combination to re-order items directly on the screen.

Use When

Why

How

Give users visual indications about what is happening and/or possible at all the 'interesting moments.' The term 'Interesting Moments' comes from the Yahoo Design Pattern Library - these are key moments in the Drag and Drop interaction when a user needs some extra visual indication that they are able to do something, about to do something, or have just done something. Users are not used to this type of rich interaction on the web, so you need to pay particular attention to helping them to discover this functionality.

The particular visual cues you use will change slightly depending on the context of your Drag and Drop interaction. We have identified two sub-patterns that provide details about different visual cues based on the context of your application:

Accessibility

Examples

iGoogle portal

Related Fluid Components

Reorderer & Lightbox

The Fluid Reorderer is a set of JavaScript objects that can be used by developers to create rich, accessible user interfaces that allow users to directly move around and re-arrange content on the page.

The Fluid Lightbox component is an implementation of the Fluid Reorderer which allows users to re-organize images within a collection by dragging-and-dropping thumbnails.

Together these components provide a framework for Drag and Drop that supports all the visual cues specified in this pattern, keyboard access and automatic handling of some ARIA state changes. The first release of has implementations of both sub-patterns. The Layout Preview pattern is implemented for keyboard, and the List Ordering pattern is implemented for mouse. Developers may wish to change this behaviour to provide visual cues for the sub-pattern that best matches your application context.

You can find more information about these and other Fluid components on the Components page of the Fluid wiki.

Related Patterns

References

Yahoo Design Patterns Library: Drag and Drop Modules