Drag and Drop
Problem Summary
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.
Solution Patterns
- Drag and Drop Modules
The user needs needs to re-arrange the layout of modules on a web page directly with the mouse.
Rationale
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
Copyright © 2005-2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings