Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks

Drag and Drop

Drag and drop is a fundamental direct-manipulation technology that makes it easy for users to interact with their content. Users expect to be able to drag any selectable item—such as a section of text, a file, an image, or an icon—and drop it in a new location.

In addition to handling users’ data without loss, supporting drag and drop is largely a matter of providing appropriate feedback. Specifically, users need to know:

  • Whether drag and drop is possible for an item (indicated by drag feedback)

  • What the results of a drag-and-drop operation will be (indicated by destination feedback)

  • Whether a drag-and-drop operation was successful (indicated by drop feedback)

The following guidelines help you provide a drag-and-drop experience that users appreciate.

As much as possible, provide alternative methods for accomplishing drag-and-drop tasks. For some users, especially those who use assistive technologies to interact with your app, drag and drop is difficult or impossible to perform. Except in cases where drag and drop is so intrinsic to an app that no suitable alternative methods exist—dragging icons in the Finder, for example—there should always be another method for accomplishing a drag-and-drop task.

Determine whether a drag-and-drop operation should result in a move or a copy. In general, if the source and destination are in the same container, such as the same window or volume, a drag-and-drop operation is interpreted as a move (that is, cut and paste). If the source and destination are in different containers, a drag-and-drop operation is interpreted as a copy (that is, copy and paste).

As much as possible, you should also consider the underlying data structure of the contents in the destination container. For example, if your app allows two windows to display the same document (multiple views of the same data), a drag-and-drop operation between these two windows should result in a move.

Check for the Option key at drop time. This behavior gives the user the flexibility of making the move-or-copy decision at a later point in the drag-and-drop sequence. Pressing the Option key during the drag-and-drop sequence should not “latch” for the remainder of the sequence.

Support single-gesture selection and dragging, when appropriate. Using a mouse or a trackpad, users can drag an item by selecting it and immediately beginning to drag, instead of by selecting the item, pausing, and then dragging. (The automatic selection of the item that can occur in this situation is called implicit selection.) Note that single-gesture selection and dragging is not possible when the user selects multiple items by dragging or by clicking individual items while holding the Command key, because multiple selection can't be implicit.

Allow users to drag a selection from an inactive window. Users expect to be able to drag items they selected previously into the currently active window. To support this action, your app should maintain the user’s selection when the containing window becomes inactive. A persistent selection in an inactive window is called a background selection and it has a different appearance from a selection in an active window.

image: ../Art/drag_from_inactive_2x.png

In particular, support background selection for items that users must select by range, such as text or a group of icons. If you don’t support background selection for range-selected items, the user must reactivate the window and reselect the items before dragging them. Support for background selection is not required if the item the user wants to drag is discrete—for example, an icon or graphical object—because implicit selection can occur when a discrete item is dragged. Note that when an inactive window is made key, the appearance of a background selection changes to the appearance of a standard selection. To learn more about the different states a window can have, see Main, Key, and Inactive Windows.

Provide drag feedback as soon as users drag an item at least three points. Display a translucent image of the item at the beginning of the drag so that users can confirm the item that they’re dragging. After the user begins a drag, the item should stay draggable, and the drag image should stay visible, until the user drops the item.

Display a drag image composed of multiple items, if appropriate. If the user selects multiple items to drag, you should display a drag image composed of images that represent each item. In addition, you should badge the aggregate drag image with the number of items being dragged so that users can confirm how many items they’re dragging. For example, dragging five files into a Mail message might look like this:

image: ../Art/multiple_drag_mail_2x.png

Change the drag image to show the dropped form of the item, if appropriate. If it helps users understand how your app can handle an item, you can change its drag image when it enters a destination region in your app. For example, when the user drags a picture file from the desktop into a TextEdit document, the picture expands to show how it will look after the user drops it in the document.

image: ../Art/multiple_drag_2x.png

Although changing the drag image can provide valuable feedback, you want to avoid creating a distracting drag-and-drop experience in which drag images are constantly (and radically) changing form.

Use the appropriate pointer to indicate what will happen when the user drops an item. For example, when users drag an icon into a toolbar, the copy pointer appears to indicate that if they let go of it there, the item will be added to the toolbar. Other pointers that provide useful destination feedback include the alias, poof, and not allowed pointers. (For more information about system-provided pointers, see Pointers.)

Update the badge of a multi-item drag when appropriate. If the destination can accept only a subset of a multi-item drag, change the number in the badge to indicate how many of the items will be accepted.

Highlight the destination region as soon as the pointer enters it and stop highlighting when the pointer leaves the region. If there are multiple destination regions within a window, highlight one destination region at a time.

Don’t highlight the destination region if the drag-and-drop operation takes place entirely within it. For example, moving a document icon to a different location in the same folder window does not highlight the folder window because this would be confusing to the user. Do highlight the destination region if the user drags an item completely out of the region and then drags the same item back into the same region again.

In text, use a vertical insertion indicator to show where the dragged item will be inserted. Note that an insertion indicator is separate from the pointer. The pointer indicates to users whether the drag is valid and whether it is interpreted as a copy.

In a list, use a horizontal insertion indicator to show where the item will be inserted. For example, when a user drags a file into the Xcode navigator, a horizontal insertion indicator appears.

image: ../Art/drag_insertion_indicator_2x.png

In a table, consider highlighting specific cells to show where the item will end up. When you provide highly targeted destination feedback such as this, you help users avoid having to rearrange their content later.

Highlight dropped text at its destination. If the destination supports styled text, the dropped text should maintain its font, typeface, and size attributes. If the destination does not support styled text, the dropped text should assume the font, typeface, and size attributes specified by the destination insertion point.

Provide additional feedback if the drop initiates a process. For example, if the user drops an item onto an icon that represents a task (such as printing), show that the task has begun and keep the user informed of the task’s progress.

Make sure users know when a dropped item can't be accepted. When the user drops an item on a destination that does not accept it, the item zooms from the pointer location back to its source location (this behavior is called a zoomback). A zoomback should also occur when a drop inside a valid destination does not result in a successful operation.

At the destination, accept the portion of the dragged item that makes sense. In your app, a destination should be able to extract the relevant data from the item the user drops. For example, if a user drags an Contacts entry to the “To” text field in Mail, only the email address is accepted, not the rest of the contact’s address information.

Display the appropriate post-drag selection state. After a successful drag-and-drop operation involving a single window, the selection state is maintained at the new location. This behavior shows the location of the dropped item and allows the user to reposition the item without having to select it again. Also:

  • If the user drags an item from an active window to an inactive window, the dragged item becomes a background selection at the destination. The active window should maintain the item’s selected state.

  • When content is dropped into a window in which something is already selected, you should deselect everything in the destination before the drop rather than replace the selection with the dragged item. Deselecting everything in the destination helps the user avoid accidental data loss.

Automatically scroll a destination window when appropriate.When an item is being dragged, your app must determine whether to scroll the contents or allow the item to “escape” the window. If your app allows items to be dragged outside of windows, you should define an automatic scrolling region. Automatically scroll a destination window only if it is also the source window and is frontmost. Don’t automatically scroll inactive windows.

Display a confirmation dialog when a drag-and-drop operation is not undoable. Although it’s best to support undo for the drag-and-drop operations in your app, it’s not always possible. For example, if the user attempts to drop an icon into a write-only drop box on a shared volume, the action is not undoable because the user doesn’t have privileges to open the drop box and reverse the drag. In such cases, it’s important to use a confirmation dialog to tell the user that their drag-and-drop operation can't be reversed.

Create a clipping or other item to contain content that users drag from your app to the Trash. A clipping is an intermediate form of content that has been dragged from a source location but has not yet been dragged to its final destination. For example, macOS allows users to drag content to a Finder window (or to the desktop) and then, in a later step, drag the content to another destination. (Note that a clipping has no relation to the Clipboard: Copying to the Clipboard and creating drag-and-drop clippings don't interfere with each other.)