Drag and Drop – Move

Foundations / Interaction / Drag and Drop / Drag and Drop – Move

Intro

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 value, and moving it changes that value.

These two scenarios result in different drag-and-drop behaviors – one affects layout, the other affects business data.

When to Use

false

Use drag and drop for moving:

To move the draggable element from one position to another.
To change the value of the draggable element.

dont

false

Don’t use drag and drop for moving:

If the draggable element is part of a list of elements and changing its position only affects how the list is displayed. Instead see Drag and Drop – Reorder.
If you need to move the draggable element from one component into another or into another application. Instead see Drag and Drop – Data Transfer.

Anatomy

Move to Change Position

Draggable еlement: A component or container that can be moved to a different position.
Drag handle/area: A designated part used to initiate a move interaction.

Anatomy – move to change position

Move to Change Value

Draggable element: A movable element whose position reflects a business-relevant value (for example, a slider thumb).
Value indicator (optional): Displays the current value of the draggable element.
Value range: The range of values that the draggable element can represent.

Anatomy – move to change value

Behavior and Interaction

Move to Change Position

To enable the movement of a component, a drag handle or drag area needs to be defined at the component level.

Drag and drop – move: drag handle and drag area – examples

When a component has a header, the header is usually defined as the drag area. (A)

Alternatively, the entire component can act as the drag area, except when hovering over interactive elements. (B)

For components with little non-interactive space, such as a floating toolbar, use a dedicated drag handle. (C)

When the user hovers over the drag area or handle, the cursor changes to a move icon (like a hand) to indicate that the component can be dragged. This interaction cannot be reverted, but the application can offer an undo option, such as Ctrl + Z.

false

Keep the current keyboard focus unchanged during the move. Dragging a component to reposition it doesn’t affect its data.

dont

false

Don’t move the keyboard focus to the drag handle or drag area during the move – it’s not necessary.

Move to Change Value

The draggable element within a component can represent business value or location information, such as a slider, data points in a scatter chart, or a pin in a map. Moving the draggable element in this context changes its value.
The draggable element can be focused and has its own interaction states, which are defined at the component level.
When the mouse hovers over the draggable element, the cursor changes to a grab cursor, indicating that the user can drag this element. When the left mouse button is pressed down on the draggable element, the cursor changes to a grabbing cursor, indicating that the element is grabbed and ready for dragging.
When the draggable element is moved, the corresponding value changes accordingly.
The user can press Esc key to cancel the interaction for changing the value. The draggable element and its value are reset to the position prior to being focused.