Child pages
  • Comparison of Drag and Drop Implementations

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.

Skip to end of metadata
Go to start of metadata

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

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