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 Intro

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 Anatomy
  1. Drag and Drop Container
  2. Draggable Indicator Icon
  3. Draggable Item
  4. Drop Zone (Droppable Area)
  5. Draggable Cursor Indicator

Drag handle is the default and recommended icon to use. If needed, Drag Indicator can also be used.

Drag and Drop Icons

System cursors are used to indicate when an element is draggable.

Drag and Drop Cursors

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.

Drag and Drop Grab Area

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.

Drag and Drop Grabbed Item Elevation

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.

Drop Zone Placeholder Shading

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 Sizes

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.

Drag and Drop Keyboard
Drag and Drop Accessibility

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.

File Upload pattern