Description

Drag and drop allows the user to move or copy an object from one place to another by grabbing, dragging, and dropping it in the desired location.

Open

Usage & Behavior

General guidelines

Structure

Drag and drop is comprised of 3 components:

• Dragged object, with drag handle.

• Drop target. The location where the dropped object will be placed.

• Original object. Shown in the dragged object’s original location.

Examples (during drag):

Dragged object	Drop target	Original object
Open

There are 4 types of drop targets:

Drag and drop handle

• The handle should be displayed for all draggable objects.

• The handle is placed to the left of the object.

Under special circumstances, the handle location or visibility (show only in hover or not at all) may be changed. See Best Practices below for more information.

Text

• Text is only used for container drop targets.

• The text should be either Drop, Drop here, or Drop <item> here, depending on available space.

States

Dragged object states

Drop target states

Mouse cursor states

There are 4 mouse cursor types:

Interaction

Main Interaction Types

Basic usage (reorder)

Note: The drop target should NOT be presented if the object’s location will not change.

Avoid this:

The horizontal target indicator (blue line) will change its starting point to show the hierarchy level where the object will be dropped.

Drag into a Folder

• When hovering over the folder, it is highlighted as a drop target.

• Auto-expand of folders will occur after hovering for 2 seconds.

  • ‘Flickering’ animation should be used on folder, to show that it is being expanded.

• If the folder is collapsed, dropping the object in a parent folder will NOT auto-expand it.

• On drop, the object will be placed first in the list (unless sorted otherwise).

  • If the dragged object is not sorted first, then the list will automatically scroll to show the object.

Drag into a Container

Hover

• The original object is greyed out, to indicate its original location.

• The dragged object floats, and has semi-transparency.

• The drop target is shown in a Hover state.

Drop

• The container changes to a Populated state.

• A progress bar may be shown while the object is uploading (where necessary).

• The display of the object may change according to its characteristics.

• The container may be emptied by deleting the object.

Copy vs Move

When the object is being copied, the mouse cursor changes to a Copy state:

Into or within a Canvas

Within a Canvas

Zero state, hover

• A canvas usually has a lot of functionality, so the drag and drop options are more hidden.

• The mouse cursor changes to Grab on hover over draggable objects.

• Other drag visuals will only be shown once an object has been grabbed (click and hold).
  
  

Drag

• On click and drag, the mouse cursor changes to a Dragging state.

• The original object is greyed out, to indicate its original location.

• The dragged object floats, and has semi-transparency.

• The drop target is shown in a Hover state only in areas where drop is an option. In this example, it is only shown for half hour intervals.

Drop

• The object is placed in the target location.

• The object should be selected, where relevant.

Into a Canvas

The dragged object will be presented in its original size while the mouse is outside the canvas (drop target area).

Multiple objects

In some cases the user can select multiple objects from different locations in a List, Tree, or Table. In such cases:

• The objects will be stacked using an animation.

• The objects will visually look ‘stacked’.

• A count of the objects will be shown to the bottom-right of the mouse cursor.

Where objects are being copied, a counter of the objects will appear next to the Copy cursor:

Tree view

• Dragging a parent branch will include all of its children.

• When the selected objects are from different levels in the hierarchy, and within different branches, they will align to the same hierarchy level when they are dropped.

Mouse cursor interactions

The mouse cursor should change to show the current drag state. See the Mouse cursor states section.

Generally, the object is dragged on 'click-and-hold'. The Grab cursor should be presented on hovering over draggable object at all times, unless:

• the object is clickable in some areas to perform other actions. In this case, the Grab cursor is displayed only on the non-clickable areas.

• the entire object is clickable or the dragging behavior is secondary in importance. In this case, the Grab cursor will not be presented; the cursor will change to Dragging only on click and hold.

On hover over the drag handle, the cursor will always be in the Grab state.

Validations and errors

On dragging an object to a location which does not allow drop:

• The drop target will not be shown.

• The mouse cursor will change to the Invalid state.

• If the object must be dragged through an invalid area to get to a valid target location, the invalid state will not be applied.

• On drop in an invalid area, the object will float back to the original location using an animation.

Best practices

Use

• Where users are likely to expect a drag and drop behavior in the feature.

• When other alternative interactions, such as ‘copy and paste’, have higher interactive cost.

General

• Use a visibly-clear drag handle to indicate the drag and drop functionality.

• In some circumstances, the drag handle can only be presented on hover, or even not at all:

  • When the object looks visually draggable or expected to be draggable → the drag handle is needed less .

  • When the feature is expected to be used frequently → the drag handle is needed less.

• On the other hand, when there are other cases where the same object is not draggable or the drag and drop behavior is of high importance → the more the drag handle is needed.

Accessibility compliance

Don’t use drag and drop as the only way to perform a task. Always offer an alternative.

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Code