drag and drop.pdf
- 1. Drag and Drop Interesting Moments • How will users know what is draggable? • What does it mean to drag and drop an object? • Where can you drop an object, and where is it not valid to drop an object? • What visual affordance will be used to indicate draggability? • During drag, how will valid and invalid drop targets be signified? • Do you drag the actual object? • Or do you drag just a ghost of the object? • Or is it a thumbnail representation that gets dragged? • What visual feedback should be used during the drag and drop interaction? ARULKUMAR V - HCI - CSE -SECE 2016-2017
- 2. The Events Page Load Mouse Hover Mouse Down Drag Initiated Drag Leaves Original Location Drag Re-Enters Original Location Drag Enters Valid Target Drag Exits Valid Target Drag Enters Specific Invalid Target Drag Is Over No Specific Target Drag Hovers Over Valid Target etc., ARULKUMAR V - HCI - CSE -SECE 2016-2017
- 3. The Actors • During each event you can visually manipulate a number of actors. The page elements Available include: – Page (e.g., static messaging on the page) – Cursor – Tool Tip – Drag Object (or some portion of the drag object, e.g., title area of a module) – Drag Object’s Parent Container – Drop Target ARULKUMAR V - HCI - CSE -SECE 2016-2017
- 4. Purpose of Drag and Drop • Drag and drop can be a powerful idiom if used correctly. Specifically it is useful for: – Drag and Drop Module • Rearranging modules on a page. – Drag and Drop List • Rearranging lists. – Drag and Drop Object • Changing relationships between objects. – Drag and Drop Action • Invoking actions on a dropped object. – Drag and Drop Collection • Maintaining collections through drag and drop. ARULKUMAR V - HCI - CSE -SECE 2016-2017
- 5. • Normal display style Invitation to drag • Dragging ARULKUMAR V - HCI - CSE -SECE 2016-2017
- 6. Example - Placeholder target • A placeholder target always shows where the dragged module will end after the drop; module 1 is being dragged from the upper right to the position between modules 3 and 4 ARULKUMAR V - HCI - CSE -SECE 2016-2017
- 7. Drag and Drop List • Rearranging lists is very similar to rearranging modules on the page but with the added constraint of being in a single dimension (up/down or left/right). The Drag and Drop List pattern defines interactions for rearranging items in a list. ARULKUMAR V - HCI - CSE -SECE 2016-2017
- 8. Drag and Drop Object • Another common use for drag and drop is to change relationships between objects. • This is appropriate when the relationships can be represented visually. Drag and drop as a means of visually manipulating relationships is a powerful tool. ARULKUMAR V - HCI - CSE -SECE 2016-2017
- 9. Drag and Drop Action • Drag and drop is also useful for invoking an action or actions on a dropped object. The Drag and Drop Action is a common pattern. Its most familiar example is dropping an item in the trash to perform the delete action. ARULKUMAR V - HCI - CSE -SECE 2016-2017