PATTERNS
LAYOUTS
Drag and Drop Patterns
Drag and Drop is a feature that allows users to directly manipulate the user interface of a website or application. It can be applied in a variety of use cases and is typically used to grab one object, drag it to another location and drop it. It is built into several components within the Goldman Sachs Design System.
In order to provide consistent visual feedback to the user we use the same underlying conventions for each of the key elements of drag and drop, which are detailed in the general Drag and Drop Component. Visual conventions include drag icons, grabbed item borders and elevation, and shading for drop zones.
Draggable lists can be created using the List component with Drag and Drop. Items within of the draggable list can have their position sorted or shifted relative by the user. to each other.
Typically used to help a user set a priority order by the user.
Drag and drop can also be used to move items between lists.
- The large size of the List component should be used to provide a larger tap area for the user.
- If the large size component cannot be used consider an alternative for sorting on touch devices, such as a menu-driven option where selections are shown in a Bottom Sheet.
- Drag indicator icons should be visible for discoverability.
- Consider using a subtle haptic “bump” to indicate when the item has been grabbed and when it has been dropped.
The Card component can also be used to create groups of draggable objects that can be reordered and sorted by the user.
- The large size of the Card component should be used to provide a larger tap area for the user.
- If the large size component cannot be used consider an alternative for sorting on touch devices, such as a menu-driven option where the move options are shown in an Dropdown Menu overflow or Bottom Sheet.
- Drag indicator icons should be visible for discoverability.
- Consider using a subtle haptic “bump” to indicate when the item has been grabbed and when it has been dropped.
Drag and drop can be used for file uploading. It can be implemented as a full page option or within a modal or it can be added inline to a form.
Drag and Drop File Upload should be combined with the Progress component to provide an indication of the length of time for the file upload to complete. The user should also be able to remove or change which file is uploaded as necessary.
- The large size of the file upload component and progress components should be used to provide a larger tap area for the user.
- If the large size component cannot be used, consider an alternative for uploading on touch devices, such as a button for adding a Dropdown overflow menu to handle additional options like moving or removing.
- Nielson Norman Group, Drag–and–Drop: How to Design for Ease of Use (2020)
Contents