Drag and Drop – Data Transfer

Foundations / Interaction / Drag and Drop / Drag and Drop – Data Transfer

Intro

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.

When to Use

Use drag and drop for data transfer:

If the drag and drop interaction occurs across components or applications.
To upload files into a target application.

Don't

Don’t use drag and drop for data transfer:

If the drag and drop interaction is performed within a single component, such as dropping one item between others or onto another to create hierarchies. For more information, see Drag and Drop - Reorder.

Anatomy

Data transfer – anatomy

Source component: The component from which the draggable elements are dragged out.
Draggable element: An item that can be dragged to transfer.
Target component: The component that hosts the dragged elements.
Initial position: The origin or starting point from where the item is dragged.

Ghost element: The visual representation of the dragged element.
Drop target: The destination area where the draggable element is dropped.
Cancel area: Any area not defined as a drop target.

Behavior and Interaction

Contextual Awareness

Contextual awareness is required in data transfer interactions. This means the system needs to understand and respond appropriately to the context in which a user performs a drag and drop action. This includes recognizing the nature of the item being dragged, the target destination, and the intent or purpose behind the action, and then providing feedback or functionality that aligns with that context.

Cursors

When the mouse hovers over the draggable element, the cursor changes to a grab cursor or to а pointing cursor if the draggable element itself has a separate interaction triggered by a click, indicating that user can drag this element. When the left mouse button is pressed down on the draggable element, the cursor changes to the grabbing cursor, indicating that the element is grabbed and ready for dragging.

If the element is moved to a cancel area, a not-allowed or no-drop cursor appears.

For the data uploading use case, the copy cursor appears as soon as the item is dragged into the area of the target component.

Empty States

When the target component is empty, a ‘no data’ text or an illustrated message is helpful to indicate that items can be added into the component via a drag-and-drop interaction.

Additional information, such as maximum file size, can be included in the ‘no data’ text or illustrated message.

For more information, see Empty States Guideline.

Empty states for various data transfer use cases – examples

Drop Target

A. When reordering is enabled for the target component:

Users can directly move the draggable elements to an exact position in the target component.
The drop target indicator can be displayed between the items, before the first item, or after the last item (see the example below).
After dropping, users can rearrange the items in the target component again. Refer to the reordering type of drag and drop for a detailed guideline on reordering in the target component.

B. When reordering is not enabled for the target component:

The drop target indicator covers the entire content area of the target component. The dropped items will be placed in a position defined by the application.

Drag and drop – data transfer: drop target indicators – A. Reorderable target – the drop target indicator appears between list items; B. Fixed target – the indicator covers the full area and items are inserted in a predefined location.

Data Format Transformation

The data format needs to be transformed according to the format in the target component.

While dragging, the ghost element remains visually identical to the source component.
After dropping, the draggable element transforms into the format defined by the target component (see example below: the list item transforms into a grid list item).

Drag and drop – data transfer: dragging an item from a list (A) and dropping it into a grid list (B).

File Uploading

When users drag files from the local operating system and drop them into the target application, it enables them to upload files to the designated component within the application.

Dropping the file in the target component initiates the file upload.
The ghost elements visualization depends on the file type (image, document, and so on) as well as on the operating system.
Files that are currently uploading should be marked accordingly, for example, with a busy indicator.
If there are already uploaded files in the target component, they will be displayed with high transparency when dragging additional files over the component.
When dragging multiple files, the focus is on the last file in the target component after dropping.

There are several components that allow data transfer and file upload via drag and drop, such as file uploader, table, list and grid list. Below is an example of using a list as the target component for file uploading.

Uploading files (A) by dragging them into a list and showing their placement during the drop (B), and after drop completion (C).

Canceling

Users can cancel a drag-and-drop operation in two ways: by dropping items into a designated cancel area or by pressing the Esc key during the interaction.

Dropping items in the cancel area allows users to abandon the current data transfer and revert items to their initial positions without making changes.

If the items are dragged into the possible drop area, pressing the Esc key cancels the action and snaps the items back to their initial positions.