Layout Reorderer Storyboard - List Ordering Behavior
- Gary Thompson
- Allison Bloodworth
- Erin Yu
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.
