Drag and Drop – Resize

Foundations / Interaction / Drag and Drop / Drag and Drop – Resize

Intro

Elements, components, or containers can be resized in one or two dimensions – or both – depending on the interaction design. Unlike reordering, which requires a specific drop target, resizing is based on the final pointer position to determine the new size.

Resizing inherently provides feedback through the visible change in size. Content and layout adjust automatically to fit the new dimensions, loading additional content when space allows.

Resizing

When to Use

false

Use drag and drop for resizing:

To adjust containers, elements, and grids for better content fit and screen usage.
To adjust UI components and containers for improved readability and interaction.
To allow users to personalize layouts, dashboards, and workspaces dynamically.

dont

false

Don’t use drag and drop for resizing:

If the UI component or container, such as buttons, icons, and form fields, should remain fixed in size to ensure consistency and uniformity.
If the layout is strictly grid-based with predefined spacing and alignment rules. Use restricted resizing instead.

Anatomy

Drag and drop – resize: anatomy – one-dimensional and two-dimensional resizing

Resizable element: An item that can be resized through a drag-and-drop interaction.
Drag handle (optional): An icon or area on a resizable element that must be grabbed to initiate dragging interaction.

Behavior and Interaction

One-Dimensional Resizing

A. Hovering over the respective area at the element’s edge allows the user to adjust the height and width of the element. The mouse cursor changes to a bi-directional arrow, indicating that resizing is possible.

B. Pressing the left mouse button initiates the resizing interaction. When the user drags, the size adjusts in real time, allowing them to see the changes directly. Releasing the left mouse button sets the element to the new size.

Drag and drop – resize: one-dimensional resizing – flow

While the general behavior and interaction of one-dimensional resizing are always the same, the availability of the drag handle, and consequently the behavior of the focus, can differ depending on the element being resized.

Focusable Drag Handle

The drag handle is always visible.
The drag handle is focusable.
Grab and grabbing cursor.
To initiate the resizing interaction, the user starts dragging the handle.

One-dimensional resizing – focusable drag handle

Non-Focusable Drag Handle

The drag handle becomes visible when hovering over the respective area.
The drag handle is not focusable.
Bi-directional cursor.
To initiate the resizing interaction, the user starts dragging the handle.

One-dimensional resizing – non-focusable drag handle

No Drag Handle

There is no drag handle that appears.
Bi-directional cursor.
To initiate the resizing interaction, the user starts dragging the edge of the element.

One-dimensional resizing – no drag handle

Two-Dimensional Resizing

A. Hovering over the drag handle, located in one of the element’s corners, changes the mouse cursor to a diagonal bi-directional arrow. Pressing the left mouse button initiates the resizing interaction.

B. When the user drags, the size adjusts in real time, allowing them to see the changes directly.

C. Releasing the left mouse button sets the element to its new size.

Drag and drop – resize: two-dimensional resizing – flow

Keeping the Aspect Ratio

Holding the Shift key while dragging enables uniform two-dimensional resizing, meaning that height and width are adjusted proportionally. If an element only allows resizing while maintaining its aspect ratio, this shortcut is not needed.

Drag and drop – resize: keeping the aspect ratio – holding the Shift key while dragging

Restricted Resizing

Some applications or components may need to restrict resizing options for users. These restrictions help ensure alignment, prevent layout breakage, and provide users with predictable interaction behavior. There are different ways to implement resizing restrictions.

Directional Constraints

In some elements, resizing is intentionally limited to specific edges, corners, or directions to maintain layout integrity and user experience consistency. This means that users may only be able to resize an element from certain edges or corners, depending on the design intent.

Minimum and Maximum

Predefined minimum and maximum dimensions (height and width) limit how far a component can be resized. These boundaries help maintain a usable layout and consistent visual design. The interaction begins when the user starts dragging the resize handle (A). When a boundary is reached, resizing stops (C) – even if the user continues dragging the mouse (B). This behavior applies to both horizontal and vertical resizing.

Drag and drop – resize: restricted resizing – minimum and maximum

Snapping to Predefined Sizes

Another way to restrict resizing is to define specific allowed sizes, which means the height or width can only change in fixed steps. During a resizing interaction, the user starts dragging the handle (A), and the component temporarily stretches as the drag continues (B). Once the next predefined size is reached, the component snaps into place (C). Other elements within the layout automatically adjust to accommodate the new size.