Intro

Drag and drop is a simple and intuitive interaction that lets users to reorder, resize, and move elements or transfer data while getting real time visual feedback. It is used in many contexts, each with specific needs and requirements depending on the use case.

Drag and drop used in different contexts, such as reordering list items, resizing components, or moving elements.

Types

The drag and drop interactions are categorized into 4 main use cases based on the purpose of the interaction.

Reordering

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.

For details, see Drag and Drop – Reorder.

Resizing

Elements, components, or containers can be resized in either a one-dimensional or two-dimensional manner, with both options potentially available simultaneously for the same component. Unlike reordering, which requires a specific drop target, resizing relies on the final positioning to determine the new size of the item.

For details, see Drag and Drop – Resize.

Moving

Drag and drop is an intuitive interaction for moving an element from one position to another. In some cases, the draggable element is used as a content container and its position then has no business significance. In other cases, the draggable element represents a business object or business value, and moving the position of the element changes its value.

For details, see Drag and Drop – Move.

Data Transfer

The drag and drop interaction can occur between components within an application or across different applications. This means users can transfer data from a source component to a target component, which may involve transforming the data format or data uploading if the transfer is across applications.

For details, see Drag and Drop – Data Transfer.

Behavior and Interaction

Scrolling

Scrolling while dragging an element should always be possible, allowing the user to reach the desired drop area. When the draggable element is dragged close to the scroll edge, auto-scrolling should begin.

Gestures

For smaller devices that allow touch interactions, the general behavior and interactions remain the same as those specified for mouse interactions, except that the finger tap replaces the left mouse click. Drag handles, which in some cases are designed to appear only on hover, aren’t supported by touch screens.

A dedicated design should be provided for touch screens at a component level.

Localization

The drag and drop interactions support both left-to-right (LTR) and right-to-left (RTL) reading directions

Undo and Confirmation

Some use cases might require undoing the drag and drop interaction right after its completion or triggering an additional confirmation dialog once an element has been dropped.

The undo and confirmation behaviors need to be defined at the application level.

For keyboard users, the Ctrl+Z combination is reserved for undoing, which reverts the last change.

Drag and Drop Alternatives

Context Menu

As an alternative to the drag-and-drop interactions, users can right-click on a specific item to open a context menu, containing a list of alternative actions for the respective drag-and-drop use cases.

The detailed specification for the context menu needs to be part of the component specifications.

On-Screen Keyboard and Click Lock

As an alternative to the drag-and-drop interactions, users should be able to use both the physical keyboard and the on-screen keyboard to perform the required actions.

On-screen keyboards can be used to perform single-click inputs or keyboard-based commands on focused UI elements. Shortcuts refer to the time-sensitive nature of certain key combinations, where keys must be pressed simultaneously or within a specific timeframe to execute an action correctly.

Such keyboards and their operating systems often offer “click lock” settings to lock modifier keys, also known as “sticky keys”. This feature enables the on-screen keyboard to be used with single-pointer input. First, the user locks the modifier key, and then they press the character or number key.

[internal_only] See Single Pointer Actions article, “Appendixes” section. [/internal_only]

Related Links