Drag and Drop

Drag and drop lets people select source content, such as text, a file, or an image, and drag it from one location (source container) to another (destination container), resulting in either the movement or duplication of the content. Most macOS apps implement some level of drag and drop functionality, based on user needs and app-specific features. For instance, a read-only text field might allow its content to be dragged to other locations but not accept dropped content. A document list might permit dragging to reorder documents but not dropping new documents. A text editor may permit dragging text around as well as accepting dropped text from other locations. Your app can enable drag and drop within a single container, such as a text view; between containers, such as two text fields or windows; and even to other apps, such as Mail and the Finder.

For developer guidance, see Drag and Drop Programming Topics.

Supporting Drag and Drop

In general, implement drag-and-drop support in your app. Drag and drop is an efficient, intuitive way to move and copy content throughout the system. Unless it truly isn’t useful in your app, such as in an immersive game, strive to support drag and drop anywhere it can add value. If your app involves working with text, images, or files, these are all areas that usually benefit from drag and drop features.

Offer alternate ways to accomplish drag-and-drop tasks. Drag-and-drop operations may be difficult for some people to perform, such as when using assistive technologies. Finder and Mail are examples of apps that offer alternatives to drag and drop—they include menu items that can be used to copy and move items between destinations.

Determine whether a drag-and-drop operation should result in a move or a copy. In general, a move usually makes sense when the source and destination containers are the same, such as the same app, document (even when dragging between two windows that display the same document), or disk. A copy usually makes sense when the source and destination containers are different, such as two different apps, documents, or disks. If you drag a Mail message to the Finder desktop, for example, the message is copied to the desktop as a file. If you drag a Mail message to a mailbox, the message is moved from its current location to the new mailbox.

Whenever possible, make drag-and-drop operations reversible. Occasionally, a user might inadvertently drag content to the wrong destination. When this happens, the user should ideally be able to use undo to restore the content to its previous location.

Responding to Dragging

When possible, let people select and drag content in a single step. In Finder, for example, you can click a file and immediately begin dragging it to a new destination. You don’t need to make a distinct selection, pause, and then start dragging unless you want to drag multiple files.

Let people drag selected content in inactive windows. Selected content in an inactive window is known as a background selection and has a different appearance from selected content in the active window. In general, people expect to be able to drag a background selection—especially when it’s a range of content like text, images, or files—to the active window. In TextEdit, for example, you can drag selected text from an inactive document to the active document without bringing the inactive document to the front. To support such an action, you must maintain the user’s selection when a window becomes inactive.

When possible, let people click and drag individual items in inactive windows without impacting the background selection. For example, while using an app, you can click an individual file in a background Finder window and drag it to a new location without deselecting any previously selected files.

Providing Feedback During a Drag

Display a drag image beneath the pointer as soon as content is dragged a distance of at least three points. A drag image should be a translucent representation of the content being dragged. This appearance provides context, indicates that a drag is in process, and enables the user to see destinations beneath the dragged content. The drag image should be displayed until the user drops the content.

Multi-item drag image and badge

Expanded drag image

Display a multi-item drag image when multiple items are dragged. If the use selects and drags multiple items, the drag image should be composed of stacked images representing the individual items. For related guidance, see Multi-Item Drag Images.

Display an item count badge during multi-item drags. A badge appears below the pointer as a small red oval containing a white number indicating the number of items being dragged. Update the badge count when appropriate. If a destination can accept only a subset of dragged items, change the badge count to indicate how many items will be accepted.

If it adds clarity, change the drag image when content is dragged over a destination. When dragging a photo into a TextEdit document, for example, the photo expands to show how it will look if the user drops it in the document. This behavior lets the user preview the result of a drag and drop operation before committing to it. Although changing the drag image can provide valuable feedback, avoid creating a distracting experience in which drag images are constantly and radically changing form.

Move pointer

Copy pointer

Display a pointer that indicates what happens when content is dropped. For example, when dragging a new icon into a toolbar, the copy pointer is displayed. Other pointers that provide useful destination feedback include alias, poof, and not allowed. See Pointers.

Clearly indicate when dropping isn’t possible. During a drag, the user should know when they can and can’t drop content. Some apps communicate this by displaying an insertion point, highlighting, or acceptance pointer badge only when dropping is possible—in other words, the lack of visual feedback indicates when dropping isn’t possible. Other apps display an explicit not allowed badge, such as a circle with a slash.

Highlight a new destination when content is dragged above it. When there are multiple destinations, highlight one at a time. When the source and destination containers are the same, then highlighting is unnecessary. For example, in Finder, moving a document icon to a different location in the same folder window doesn’t highlight the folder window because doing so would cause confusion. In some cases, highlighting may occur if content is dragged completely out of a container and then reenters it. Highlighting should be removed when content is no longer positioned above a destination.

Vertical insertion indicator

Horizontal insertion indicator

In text, use a vertical insertion indicator to show where the dragged content will appear when dropped. An insertion indicator is separate from the pointer, which indicates to users whether a drag is valid and whether it is interpreted as a move or copy.

In a table, use a horizontal insertion indicator and highlighting to show where content will reside when dropped. The sidebar of a Finder window, for example, shows a horizontal insertion indicator when content is dragged between existing sidebar items. Folders and disks in the sidebar also become highlighted when content is dragged over them, indicating that dropped content will be moved or copied into them.

Automatically scroll a destination when appropriate. When content is dragged outside the bounds of a destination, your app must determine whether to scroll the contents of the destination or let the user continue dragging to an entirely different destination. If your app lets the user continue dragging, consider defining a region that causes automatic scrolling when the dragged item is positioned above it. For example, a Finder window automatically scrolls when content is dragged to the top or bottom of the window’s body area. Automatic scrolling should only occur in active windows. If the user attempts to initiate automatic scrolling in an inactive window, bring the window to the front.

Accepting Dropped Data

Check for the Option key at drop time. Users can force a drag-and-drop operation within the same container to behave like a copy by pressing the Option key while dragging. This behavior gives users the flexibility of making the move-or-copy decision while in the process of dragging. If the user stops pressing Option before dropping content in the same container, then a move to occur instead of a copy. In general, dragging between two different containers should always produce a copy.

Use the expected animation when dropping is unsuccessful. When the user drops an item on an invalid destination, or when dropping fails, the item should zoom from the pointer location back to its original location. This behavior is known as a zoomback.

Ask for confirmation before completing a drag-and-drop operation that can’t be reversed. For example, Finder asks for confirmation when a user drags a file into a write-only folder because the user doesn’t have privileges to open the folder and remove the dropped item.

Provide additional feedback when dropped content initiates a process. If the user drops an item onto an icon representing a task, such as printing, show that the task has begun and keep the user informed of the task’s progress.

Extract the relevant portion off a dropped item. For example, if a user drags a person from the Contacts app to the To recipient field in a Mail message, only the name and email address are accepted, not the rest of the contact’s address information.

Update the selection accordingly after content is dropped. When selected content is dragged to a new location in the same container, it should remain selected in its new location. When selected content is dragged to another container, it should become selected in the new location and any previous selection should be deselected.

Apply appropriate styling to dropped text. If the destination supports the same styled text attributes, the dropped text should maintain its original font, typeface, and size attributes. Otherwise, the dropped text should assume the font, typeface, and size attributes of the destination.

Sharing Dragged Data

Consider letting people drag your app’s content into the Finder. Many apps support dragging content to the Finder. Ideally, this content should be output in a format that can be dragged back to or opened by your app. Calendar, for example, lets you drag events to the Finder as .ics files, which can be opened in Calendar or shared with others. Some apps output dragged content in clipping form. A clipping is a temporary container for storing dragged content. Once generated, a clipping can be dragged to a new destination. Most apps in the system let you drag text to the Finder as a clipping, and then, at a later time, drag the clipping into a text field or other location. Note that clippings have no relation to the Clipboard—generating a drag-and-drop clipping does not affect the Clipboard.