Child pages
  • Layout Reorderer Storyboard - List Ordering Behavior

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

Hover over portlet title bar changes pointer cursor to move cursor

This follows the user convention to signal an object as drag-able. Locked portlets do not change the cursor on title bar hover. Locked portlets (Campus News & Events in this example) have a different visual appearance (in this example a brighter color) than non-locked portlets outside of the drag and drop interaction to reinforce the locked state and presumably higher-importance content.




On begin drag, locked portlets change visual appearance.

The dragged portlet remains in the original position at 25% opacity. The drag avatar is a small grey box. The small box was chosen instead of a full-size, see-through copy of the portlet to prevent problems with seeing the drop target. Locked portlets change to a lock icon with title only and are filled solid color.




Attempting to drag above a locked portlet results in no valid drop target

In this example, dragged content remains in the original position, and the valid drop target indicator does not appear.




Dragging to a valid drop target displays the drop target visual indicator

Having the cursor/drag avatar in the top half of an unlocked portlet puts the drop target visual indicator (in this example the orange bar) at the top of that portlet. Moving the cursor/drag avatar to the bottom half of an unlocked portlet puts the drop target visual indicator at the bottom of that portlet.





On drop, the cursor returns to a pointer cursor and the content is placed

The interaction is finished and the layout change should persist.