The user needs a way to perform operations on one or more objects by being able to move objects from one place to another directly with the mouse.

Why Use This Pattern?

Drag and Drop is a shortcut mechanism that allows users to perform more complex tasks through direct manipulation. It follows good design principles such as What-you-see-is-what-you-get (WYSIWYG), keeping information in context and using direct manipulation.

The following interesting moments can be important during a drag and drop interaction. A good solution will consider each of these moments below (a specific drag and drop pattern may choose to ignore some of them.)

• Page Load
• Mouse Hover Over Drag Object
• Mouse Down On Drag Region of Drag Object
• Drag Initiated
• Drag Over Original Location
  • Drag Leaves Original Location
  • Drag Re-enters Original Location
• Drag Over Valid Target
• Drag Enters Valid Target
• Drag Hovers Over Valid Target
• Drag Exits Valid Target
• Drag Over Invalid Target
  • Drag Enters Invalid Target
  • Drag Hovers Over Invalid Target
  • Drag Exits Invalid Target
• Drag Over No Specific Target
• Drop Accepted
  • Drop Accepted Begins
  • Drop Accepted Ends
• Drop Rejected
• Drop On Original Location

In addition, the following interface elements play a role in some or all of the states above:

• Page (static text, images provided)
• Cursor
• Tool Tip
• Drag Object
• Drag Object Proxy (can be same as drag object)
• Drag Object's Parent Container
• Drop Target