Guidelines
When to use
- Categorizing content: Grouping or organizing items, such as grouping elements into categories.
- Reordering items: For lists where users need to change the sequence.
- Bulk selection: Improve the efficiency by dragging multiple items to another location in bulk.
When not to use
- Small screens: On mobile or compact screens, drag-and-drop can be challenging to use accurately
- Simple selections: When a basic Button, Dropdown Button or Split Button is faster and easier for the user.
- Precision placement: When items need to be dropped in an exact spot, the Drag-and-Drop can lack precision.
- Dropping into actions: Don’t drop the elements into an action element such a Button.
Good to know
Pattern elements
The Drag-and-Drop pattern consists of various elements, some are mandatory and some others are optional, depending on the specific use case.
Icon Button Ghost
This component must always be visible within the slot container and serves as the trigger for initiating the drag action.
Container
The container has 4 different states based on the Drag-and-Drop situation:
|
Item |
Variant |
Description |
|---|---|---|
|
1 |
Default |
It is the slot content itself, without any additional elements. |
|
2 |
Dragging |
The element turns to the dragging state after clicking the Icon Button, allowing the user to move the slot content to the desired location. |
|
3 |
Ghost |
It shows a semi-transparent copy of the dragged item, providing visual feedback while the user moves it to a new location. |
|
4 |
Drop area |
Its the container where the elements can be dropped. If the droppable area is part of a form pattern, it should use the Dropzone component. |
Drop indicator
The drop indicator will appear in either a horizontal or vertical orientation, based on the orientation of the block containing the dropped element.
|
Item |
Variant |
Description |
|---|---|---|
|
1 |
Vertical |
If the block container has a horizontal layout, from left to right, the drop indicator will reflect this. For example, when dragging a trend card left or right. |
|
2 |
Horizontal |
When it's a vertical dragging action, such as in vertical lists. |
Bulk dragging
In cases with bulk selection, this element is displayed during dragging to indicate the number of items being dragged.
Feedback
|
Item |
Variant |
Description |
Optional |
|---|---|---|---|
|
1 |
Dialogue |
It ensures users confirm critical actions, preventing accidental changes and enhancing control, especially for actions with significant impact or irreversible effects. |
Yes |
|
2 |
Alert |
It provides feedback, and offers an option to undo, improving user confidence and control. |
|
Behaviours
Mouse interactions
Keyboard interactions
Enabling drag-and-drop via keyboard is essential for accessibility and efficiency. It ensures users with disabilities can fully interact with the interface, meeting accessibility standards. Additionally, users who navigate with the keyboard still have the ability to perform drag actions. This flexibility improves user experience and supports the platform’s goal of optimizing time and usability.
Dropping
|
Key |
Interactions |
|---|---|
|
Tab |
Sets focus on the Button |
|
Space or Enter |
Opens the Overflow Menu if its droppable. |
|
Up or Down arrows |
Moves between the Overflow Menu List Items to select where the element will be grouped or placed. |
|
Space or Enter |
Selects the List Item and triggers the action. |
|
Escape |
Closes the Overflow Menu. |
Sorting
|
Key |
Interactions |
|---|---|
|
Tab |
Sets focus on the Button |
|
Space or Enter |
Set focus to the whole sortable element. |
|
Up or Down arrows |
Moves between the list element in order to sort it. |
|
Space or Enter |
Confirm the new element place. |
|
Escape |
Cancel the sortable action. |