Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

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:

  1. fluid:Picassa Web
  2. fluid:Flickr

Event Comparison:

Interesting Moment

Picassa Web

Flickr Photo Organizer


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"


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