COMPONENTS
Drag and Drop
The Drag and Drop component allows the user to directly manipulate components displayed on the screen and can be used to move and reorder objects or for file upload.
Drag and Drop is a container component that can be implemented together with several other components including Card, List and File Upload.
- Drag and Drop Container
- Draggable Indicator Icon
- Draggable Item
- Drop Zone (Droppable Area)
- Draggable Cursor Indicator
Drag handle is the default and recommended icon to use. If needed, Drag Indicator can also be used.
System cursors are used to indicate when an element is draggable.
The grab area can be defined in two ways — item container or drag icon only. By default the grab area is set to item container.
Feedback is provided to the user that an element has been grabbed by adding elevation to a grabbed item. Three levels of elevation should be added to the item being dragged. On items without elevation, a dragged item has elevation-03 applied. If an item is within a container that alrerady has elevation-02, then elevation-05 should be applied.
The drop zone or droppable placeholder area is darkened to indicate to the user the area that an item will be dropped into when released. By default it uses the interaction state color token surface-primary-hover.
Within components that are built with Drag and Drop capabilities, sizes are available and typically change the size of the icon or font size when needed. Three sizes are available — small, medium and large. The large size is recommended for use on mobile devices. Read more about Drag and Drop options on mobile in the Drag and Drop Pattern.
Drag and Drop can be accessed through the keyboard. Screen reader messages should be included for all components to provide guidance on how to drag and drop with the keys.
Three components have been updated to include drag and drop as a distinct property — List Group, Card and File Upload Input.
Several patterns are available in the Drag and Drop Pattern page. These include draggable lists, draggable cards and drag and drop file upload.
Contents