Drag and Drop – Reorder

Foundations / Interaction / Drag and Drop / Drag and Drop – Reorder

Intro

Elements can be reordered by dragging them to a new position within a defined list or grid. Reordering changes the placement of elements relative to other items and requires a specific drop target to finalize the new order of the item set.

Visual feedback should indicate the potential placement before the drop occurs. Once an item is dropped, the surrounding content should smoothly adjust to reflect the updated sequence. Depending on the context, reordering may be reversible, allowing users to undo or cancel the action before finalizing changes.

Drag-and-drop reordering

When to Use

Use drag and drop for reordering:

To allow users to rearrange items and components within a layout for better organization.
To let users reorder items based on importance, urgency, or preference.

Don't

Don’t use drag and drop for reordering:

If the item set must stay in a specific order.
If the item set consists of thousands of items. Drag and drop becomes inefficient in such large item sets.
If you need to move the draggable element from one position to another or change the value of the draggable element. Use Drag and Drop – Move instead.
If you need to move the draggable element from one component into another component or into another application. Use Drag and Drop – Data Transfer instead.

Anatomy

Anatomy of a drag-and-drop reorder type – vertical and horizontal layouts

Draggable element: An item that can be dragged to perform a reordering interaction.
Initial position: An origin or starting point from where the item is dragged.
Ghost element: The visual representation of the dragged element(s).
Drop target: The destination area where the draggable element would be dropped.
Cancel area: Any area that is not defined as a drop target is considered a cancel area.

Anatomy of a drag-and-drop reorder type – grid layout

Behavior and Interaction

Vertical and Horizontal Layout Reordering

Hovering over a draggable element changes the cursor to either a grab cursor or a pointer cursor, depending on whether the element has a separate interaction when clicked.

When a user starts to drag an element, the cursor changes to a grabbing cursor, focus is applied to the element in its initial position, and a ghost element appears. The ghost element stays attached to the cursor, while the original element remains visible in its initial position in a disabled state.

The drop target indicator is positioned dynamically between elements while the cursor is being moved. Dropping the element causes the ghost to disappear, places the element at the current position of the indicator, and removes the element from its initial position. The focus is applied to the element in its new position. The other elements adjust their positions accordingly within the layout.

Drag and drop: reordering flow – vertical layouts

Drag and drop: reordering flow – horizontal layouts

Reordering with Nesting Levels

Nesting into Another Item

Dragging an item onto another allows the user to add the dragged item as a subitem of the drop target. An indicator on the drop target shows that nesting is allowed. The drop target can be either a parent node or a child node.

After dropping an item, the drop target can be either expanded or remain collapsed, depending on the application-level settings for each case. Focus is applied only to the dropped item if the parent is expanded. The position of the dropped item among the subitems is determined by the application.

If you hold the dragged item over a parent item, the parent node expands, allowing you to drop the item into a more specific position.

Nesting into another item flow

Nesting a Parent Item

When dragging a parent item, whether the subitems move with it should be defined at an application level, aligning with the corresponding selection mode.

If the subitems are moved together with the parent item, the ghost element will display the item with a parent node sign. If the parent is expanded, the ghost element shows a collapsed version of the parent while dragging, even if the original remains expanded in place. After dropping, it can be defined per use case whether the dropped subitems should be shown as expanded or collapsed.

Nesting a parent item flow – with subitems

If the subitems are not moved together with the parent item, the ghost element will display the item without a parent node sign. The application will need to define how to display the subitems of the dragged item.

Nesting a parent item flow – without subitems

Grid-Layout Reordering

Reordering flow – grid layouts

Hovering over a draggable element changes the cursor to a grab cursor. When you start dragging, the cursor changes to a grabbing cursor, and a ghost element appears, which sticks to the cursor. The element remains visible in its initial position in a disabled state.

Unlike horizontal and vertical layouts, the element in its initial position remains visible only as long as no drop target indicator is shown. In this case, the drop target indicator appears in the form of the elements, already triggering the reordering of the elements around it.

How the elements are reordered depends on the rules, which must be defined at the component level.

Releasing the left mouse button drops the element at the current position of the indicator.

Reordering of Multiple Items

Multi-selection reordering enables users to rearrange selected items as a group within a component. This allows efficient batch adjustments to the item order.

How the selection of multiple items works needs to be defined at the component level.
Selecting multiple items and dragging them triggers the movement of all selected items as a group. The ghost element displays the number of items in the batch. After dropping, the items retain their selected states by default, allowing users to continue moving them in case they are placed in the wrong position.

Everything else behaves as it does for single selection reordering.

Reordering of multiple items

Canceling

Canceling a reordering interaction allows users to abandon the current drag action and revert items back to their initial positions without making changes.

The ESC key can cancel the reordering in every situation, causing the element to snap back to its initial position.

Another way to cancel is by moving the element to a cancel area and releasing it there, which also makes the element snap back to its initial position.