Anatomy
Action: Sorting
|
Item |
Name |
Description |
Component |
|---|---|---|---|
|
1 |
Icon Button Ghost |
This is the element that initiates the dragging action. It must always be visible, regardless of the type of drag-and-drop implementation. The initiation element should be a small size and must be included within the content area that accepts dropped items. |
|
|
2 |
Container |
The container is where the dragged content will be placed. It has three different states based on the drag-and-drop context: Default state - the normal appearance when no item is being dragged. Dragging state - the appearance when an item is currently being dragged over the container. Ghost state - the appearance of a placeholder indicating where the dragged item will be placed. The entire container area is considered the 'slot content' that accepts dropped items |
|
|
3 |
Drop indicator |
It indicates where the element dragged will be sorted |
|
Action: Dropping
|
Item |
Name |
Description |
Component |
Optional |
|---|---|---|---|---|
|
1 |
Bulk drag |
Bulk drag represents when multiple selected items are being moved together during a drag-and-drop operation. It provides a visual indication that a group of elements is being dragged and relocated as a single unit. |
|
Yes |
|
2 |
Drop area |
The drop zone is the target area where users can drop draggable items. It provides visual feedback to guide the user's interactions.If the drop zone is part of a form, it can use a 'Dropzone form' component.If the drop zone is a standalone droppable element, it can use a 'Dropzone variant' which includes a default state when no item is being dragged. |
|
Good to know
In the Drag-and-Drop component, the draggable area is created using a Slot helper. This approach provides greater flexibility, enabling customization for different UX flows while ensuring structural consistency. It’s important to enhance that the Drag-and-Drop component affects the entire element, meaning it applies to the full slot content.