Child pages
  • List Reorderer Wireframes

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


To help users discover List Reordering

  • an informational message is available
  • hover text is on by default and is customizable
  • the mouse changes to a pointer



  • Indicate drop target with arrow and red line.  These are configurable and can be turned and off.  They are on by default.
  • Mouse becomes a hand while dragging.
  • The object being dragged is viewed as "ghost" avatar.  It should be slightly opaque so the item underneath are in sight.
  • Leave blank space where object was picked up from.
  • If number ordering is on, the number changes as the avatar is dragged to indicate the potential location (so there are 2 items with the same number).  Once the object is dropped, all other numbers update themselves.




 To help user follow moved object:

  • Add a slight opaque highlight to item being moved.
  • Once dropped, slowly fade out the highlight over 2 seconds.

Number Reorder

For longer lists, it is easier for users to reorder using numbers.  Provide a configuration add-on to the component to allow users to change the order of a list via numbering.

  • Display current order to users in text entry fields for each item.
  • Allow user to change order by entering a new number.  On save (clicking out of field or enter), the item moves to its new location and all other numbers are updated respectively.



  • Make "undo last move" and "undo all moves" available after user has reordered.
  • "Undo last move" undoes one move.  It will then be disabled until the next move.
  • "Undo all moves" undoes all moves in this session.


  • No labels