Comparison of Drag and Drop Implementations
Comparison of several drag and drop interaction implementations for organizing photos. The term "Interesting Moment" is taken from the Yahoo Design Patterns documents, which describes various times at which the UI needs to give the user some kind of feedback.
Video Examples:
Event Comparison:
Interesting Moment |
Picassa Web |
Flickr Photo Organizer |
iPhoto |
Page Loaded |
images are shown as small thumbnails |
|
|
Mouse Hover |
Cursor changes to pointer |
Cursor changes to pointer |
|
Image Clicked |
Border appears indicating "selected state" |
N/a |
|
Drag Initiated |
Half-alpha 'shadow' created |
Original image becomes the shadow |
|
Drag Over Valid |
Adjacent images move out the way to indicate a valid drop point |
Original image (half alpha) 'follows' cursor to indicate potential new position |
|
Drag Over Invalid |
No change in thumbnails |
Snaps to closest 'valid' position |
|
Drag Over Original |
No Change in thumbnails |
Snaps to closest 'valid' position (in this case the original) |
|
Drop Accepted |
Original object removed, and placed in new position |
Dragged Object moves to new position (animation), replacing half-alpha version. |
|
Drop Rejected |
No Change, Dragged object removed |
No Change, Dragged object removed |
|
Drop on Original |
No Change, dragged object removed |
No Change, dragged object removed |
|
External Links