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 drop shadows indicate "you can do something with this"
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 Dragged object is at full alpha Cursor changes to four-way arrow
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