Drag and Drop

Overview

Users can move elements on the screen by dragging and dropping them, using a mouse, keyboard, or other input device.

States

Elements of the list can be shifted in terms of their positioning relative to each other. When an entry is moved, possible destinations are shown graphically.

1. Default state
   State visible before click.

2. Hover/focused state
   State visible when the cursor hovers the box. Cursor becomes a hand.

3. Dragging state
   State indicates that the object is “grabbed”.

4. Drop state
   State indicates the user where the box will go when he "drops" it.

5. Disabled state
   State visible when no interraction is possible with the box. background and label are displayed but they are greyed out. A tooltip can be added to inform the reason of deactivation.

Anatomy

1. Label

2. Container

3. Grab-handle icons
   The grab-handle icon communicates that drag–and–drop is available and provide a safe target to click and drag without activating other nearby controls. The user doesn't have to click exactly on the grab handle icon, but its purpose remains the same. In the default version, without checkbox, the user can click on the whole box to initiave the drag and drop.

4. Outline
   The outline makes it clear what the status of the box is.

5. Checkbox
   A box can also contain a checkbox. In this case, it's only the action icon that is clickable to initiate the drag and drop.
   More info about the checkboxes available here.

Behavior

How it works?

1. To initiate the interaction, users acquire an object using a mouse or touch gesture (such as a mouse click or, respectively, a long press).
2. While keeping the object selected (e.g., by continuous pressure on the mouse button), the user then moves the pointing device (mouse, finger, etc.) to some desired target. This is the “drag” part of the operation.
3. Finally, the user deselects the object — for example, by letting go of the mouse button. This is the “drop” area.

The outcome of all these steps may simply be that the object has been relocated.

System cursors.

System cursors indicate when an element is draggable. The system cursors will significantly improve discoverability of draggable elements.

• The cursor appears on hover and indicates that drag–and–drop is available.
• While clicking and holding, the drag–and–drop cursor changes to a closed glove to indicate that the item is grabbed.