The design system team has completed the initial research and design work for a new Drag and Drop pattern. This pattern is now open for developer contributions from product teams.
If your team needs drag and drop functionality, we encourage you to collaborate with the design system team. By working together, we can refine and finalize the implementation of this pattern to ensure it meets the needs of your products. Your feedback and code contributions will help shape the final version of the Drag and Drop pattern.
Introduction
Drag-and-drop functionality transforms the user experience by making common tasks like organizing files, sorting data, and grouping items more natural and efficient. Instead of using complex menus or buttons, users can simply click, drag, and release items to place them exactly where they want them. This intuitive approach not only speeds up workflows but also makes the interface more engaging and satisfying to use, as it mimics the familiar physical action of picking up and moving objects in the real world.
To see how it should behave, you can watch a demonstration video. To handle the complexity and variety of potential scenarios, we use the DnDKit framework to implement drag-and-drop functionality.
Good to know
There are two types of drag-and-drop interactions, based on their purpose.
|
Sorting |
Dropping |
|---|---|
|
|
|
In drag and drop, sorting lets users rearrange items by dragging them to new positions in a list, while dragging is the action of clicking and holding an item as you move it to a different location before dropping it into place. |
Dropping is the final action in drag and drop, where users release the mouse button to place an item in its new location. When you drop an item, the system confirms if the placement is valid and either completes the move or returns the item to its original position. |
Related components & guidelines