Drag and drop
To move and reorder items in a collection or across similar collections, users can press and drag them to a new position.
There is a clear affordance that distinguishes draggable items from non-draggable ones:
- Draggable items have rounded corners and a shadow.
- Non-draggable items look like a plain list.
Use system cursors to indicate when an element is draggable. The
grab cursor appears on hover when an element is draggable. Once it’s dragged, the cursor will change to
grabbing. For areas where an element cannot be dropped, use the
This interaction model is used to transform the position of elements. Usually, these are items in collections with other similar items. When moving items across collections, the collections should be similar in content.
Drag and drop should be disabled if the collection is sorted by a specific attribute, as the logic of either contradicts the other. Example: you cannot manually reorder issues if they are sorted by popularity.
Be cautious when allowing drag and drop in a large collection with dozens or hundreds of items. It’s mainly intended for quick reordering of items in short collections where the user can comprehend the collection’s size and scope. This is usually possible by being able to view all of the items at the same time. If the user might spend a long time going through, prioritizing, and reordering hundreds of items, consider a different design.
Todo: Add live component block with code example
Todo: Add design specs link
The mouse cursor is key in helping users understand how to interact with elements on the screen.
| ||The platform-dependent default cursor. Typically an arrow.|
| ||Indicates that you can click on an element to invoke a command or navigate, such as links and buttons.|