Drag and Drop Modules

Working Solution · Last modified July 15, 2009

For each one of multiple event states (or, as we call them, interesting moments), drag and drop interactions must orchestrate a varying number of on-screen elements (actors) that can be styled, positioned or animated.

For dragging and dropping modules the set of interesting moments and actors is smaller.

The key interesting moments are initial page rendering, mouse hover over draggable object, drag initiated, drag over valid target, drag over invalid target, drag over original location, drop accepted, drop rejected, and drop back on original location.

The four interface actors are the cursor, a module (or thumbnail representation of same), the original location of the module, and a drop target.

Delicious Bookmark this on Delicious

What Problem Does This Solve?

The user needs needs to re-arrange the layout of modules on a web page directly with the mouse.

When to Use This Pattern

  • You want to avoid forcing the user to go to another page in order to re-arrange the layout
  • You are designing a web portal page requiring user personalization (such as http://my.yahoo.com)

What's the Solution?

Drag and drop interactions can be very complex. The complexity lies in the number of event states (we call these event states interesting moments) that can be used in a specific drag and drop sequence.

In addition, there are a number of on-screen elements (actors) that can be styled, positioned or animated for each of the given event states. To see the complete list of event states possible for drag and drop, check out the rationale for Drag and Drop.

For dragging and dropping modules the set of interesting moments and actors is smaller. Here are the most pertinent interesting moments for Drag and Drop Modules:

  • Page generation (for what gets shown when the page is first rendered)
  • Mouse hover over draggable object
  • Drag initiated (mouse down, mouse moves >= 3pixels)
  • Drag over a valid target area
  • Drag over an invalid target area
  • Drag over the original location
  • Drop accepted
  • Drop rejected
  • Drop back on original location

On a page with content modules, the following user interface elements (actors) may particpate during each interesting moment.

  • Cursor
  • Module or thumbnail representation of module
  • Original location of module being dragged
  • Drop target (or insertion bar showing where module will be dropped)

Interesting Moments Storyboard Grid

At each interesting moment in the drag and drop interaction, an actor gets involved. This grid captures each of these interactions that occur while re-arranging page modules during a drag and drop sequence.

Page Generation Mouse Hover Drag Initiated Drag over Valid Drag over Invalid Drag over Original Drop Accepted Drop Rejected Drop on Original
Page Content Hint N/A N/A N/A N/A N/A N/A N/A N/A
Cursor Normal Move Cursor Move Cursor Move Cursor Move Cursor Move Cursor Normal Normal Normal
Drag Object Normal Normal Reduced Opacity & Tracking Reduced Opacity & Tracking Reduced Opacity & Tracking + Invalid Badge Reduced Opacity & Tracking

2. Modules animates into the area just below the insertion bar

3. Module comes to rest in new area

4. Modules slide up in a self-healing transition to close hole

Normal Opacity + Zoom Back to Original Normal Opacity + Zoom Back to Original
Orig Location Normal Normal Hole Opens Hole Remains Hole Remains Hole Remains Hole Remains Hole refilled with drag object Hole refilled with drag object
Drop Target Normal Normal Normal Insertion Bar N/A N/A 1. Insertion Bar Removed N/A N/A

The drag and drop solution is described below in detail.

Page Generation

    Since the idiom of drag and drop is not yet common in web pages, discoverability of the idiom is an issue. One solution is to provide an initial help hint that clues the user that modules may be re-arranged by drag and drop. This hint should go away after the user has used the feature a few times or after a set number of logins.

Mouse Hover

  • Cursor Change. Change the mouse cursor to the CSS:move cursor. This appears as 4 arrows (except on Firefox on the Mac where it shows as an open hand cursor)
  • Optionally: Provide a tooltip when the mouse hovers over the draggable region of a draggable object. Tooltip informs the user that they can drag and drop the module. In testing, user's did not seen to need this additional feedback. The cursor change provided on hover was sufficient

Drag Initiated (and Tracking)

  • Drag Module
    • Module moves to match mouse movement (starts tracking with the mouse location).
    • Opacity is reduced slightly to allow modules and page elements underneath to show through. Reduced opacity is maintained throughout drag experience. Module floats above the other page elements.
  • Original Area. Since module is moved, a "hole" appears at the module's original location.

Drag over Valid Target Area

  • Drop Target Area. A thin insertion bar is shown where the module would be dropped (between two other modules).

Drag over Invalid Target Area

  • Cursor Badge. An "Invalid Badge" is floated beside the cursor to indicate that dropping here will be rejected.
  • Drop Target (Insertion Bar). None.

Drag over Original Area (the "hole")

  • Cursor. Move cursor.
  • Dragged Module. Consistent with dragging (reduced opacity, etc.)
  • Drop Target (Insertion Bar). None.

Drop Accepted

  • Cursor. Returns to normal cursor
  • Drop Target. Insertion bar is removed
  • An animation sequence occurs to put the module into the new location
    • Drop Target.
      • Insertion bar is removed.
      • Hole opens for new area.
    • Dragged Module.
      • Dragged Module animates into the new area (as it opens)
      • Opacity animates to normal
    • Original Area.
      • Area closes up with animated transition (Self-Healing Transition)
        • Causes the other modules to close in around the original hole

Drop Rejected

  • Cursor. Returns to normal.
  • Dragged Module.
    • Animates back to original position ("the hole") -- zoom back.
    • Opacity increases to full opacity.
  • Original Area. Is not filled with the module back in original position

Drop on Original Area

  • Cursor. Return to normal.
  • Dragged Module.
    • Animates back to original position ("the hole") -- zoom back.
    • Opacity increases to full opacity.

Why Use This Pattern?

This drag and drop solution varies slightly from google.com/ig, netvibes.com, live.com and other portals that have implemented drag and drop. The main difference is the following concepts:
  • The drag operation is a preview and not a completed operation. Therefore do not re-arrange anything on the page until the drop has occurred. Instead hint at what is happening by leaving a hole in the original location and highlighting an insertion bar to show where the object will be dropped.
  • Since the page will re-arrange when the user drops the module, smooth out layout changes by animating transitions. Close the original hole with a Self-Healing Transition. Slide modules into place with Slide Transitions.
  • The dragged module should not get in the way of re-arranging the layout. We use a diminished opacity to allow what is underneath the dragged module to still appear.


  • Drag and drop is not fully accessible. One way to support accessibility is to provide an alternate way to re-arrange your content modules. On My Yahoo you can select a "Change Layout" feature which takes the user to another page allowing them a way to re-order the content modules in lists.
  • Module order may not matter as much to a non-sighted user. If the content modules have been created with good structural HTML markup they should be able to move from module to module quickly. However, they may still want to change the order of the content modules allowing them to access the most important modules first.
  • When highlighting D&D source and destinations, pick colors carefully avoiding strange color combinations and/or lack of contrast. Good contrasting color combinations can help those with limited sight to find targets much easier. Possibly allow users to configure their own selection of colors for future use.