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 might permit dragging text around as well as accepting dropped text from another app.
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, it can 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.
When 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.
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 occurs 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 from a dropped item. For example, when users drag 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 content from your app into the Finder. Ideally, output this content in a format that can be dragged back to or opened by your app. Calendar, for example, lets users drag events to the Finder as .ics files, which can be opened in Calendar or shared with others.
Tip Some apps output dragged content in a clipping, which is a temporary container for storing dragged content. After it's generated, a clipping can be dragged to a new destination. Most system apps let users drag text to the Finder as a clipping, and 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.