Anatomy
The DropIndicator appears above or below a list of draggable items.
- Indicator: Line displayed to indicate the position of where an item will be placed when dropped.
Sizes
Navigation
Within our core navigation, when more dragging non-nested list items, the DropIndicator fills the full width of the container.
Sidebar
Inside larger components such as Sibebar, we have default padding applied so the DropIndicator stretches within these constraints.
Behaviour
Nested
When items are nested inside folders, the width of the DropIndicator should match the shortened width of the list item.
However, should the ListItem be dragged outside of the folder from where it is originally placed, the indicator now matches the width of the folder or position for which it will be positioned.
Disabled
When an item can not be dragged to a new position, the DropIndicator becomes disabled.
Best practice
- Make sure the DropIndicator is the same width of the item it is moving.
- The indicator moves position once the selected item has been dragged over half the height of the next item above and below.
Also see
- ListItem