Drag and Drop
With a single finger, a user can move or duplicate selected photos, text, or other content by dragging the content from one location to another, then raising the finger to drop it.
Touching and holding selected content makes it appear to rise and adhere to the user's finger. As the content is dragged, animations and visual cues identify possible destinations. The system also displays a badge that indicates when dropping isn’t possible, or will result in duplicating the content rather than moving it. For developer guidance, see Drag and Drop in UIKit.
Sources and Destinations
Drag and drop involves moving selected content from a source location to a destination. These locations can be in the same container, like a text view, or in different containers, like text views on opposite sides of a split view. In Notes, for example, the user can drag selected text to a new location within the same note. In Reminders, the user can drag individual reminders out of one list and drop them into another.
On iPad, source and destination locations can also exist in different apps, enabling cross-app interactions like dragging a photo from a webpage in Safari to a new message in Mail. While dragging content, the user can access another app through multitasking, exiting to the Home screen, or swiping up from the bottom of the screen to reveal the Dock.
Note Dragging and dropping content between apps always results in duplication, not movement, of content.
Supporting Drag and Drop
Drag and drop is an efficient, intuitive feature that users expect to be implemented pervasively throughout the system. If your app includes or produces text, photos, video, audio, or other content that people might want to move, copy, or insert, your app should support drag and drop.
Make drag and drop available for all selectable and editable content. Selectable content should be draggable, and editable content should accept dropped content. Also make sure your app supports copy and paste in these areas.
Allow content to be dropped on controls when applicable. In general, configure controls that enable data entry or selection, like text fields, to accept dropped content.
Use standard text views and text fields whenever possible. These system-provided elements include built-in support for drag and drop. For related guidance, see Text Fields and Text Views. For developer guidance, see UITextField and UITextView.
For greater efficiency, consider supporting multi-item drag and drop. In many apps, the user can drag a single item with one finger, and while dragging, select additional items by tapping them with another finger. The selected items move together and appear stacked beneath the finger that's dragging the original item. The user then drags the items as a group and drops them over the desired destination. For example, the Home screen allows multiple app icons to be selected and dragged into a folder all at once. Some apps, like Photos, offer a selection mode that enables the selection of multiple items prior to dragging.
Determine whether dragging and dropping content within your app should result in a move or a copy. In general, a move makes sense when the source and destination containers are the same (dragging text within a document), and a copy makes sense when they’re different (dragging between documents, or between apps). This isn’t always the case, however. Above all, drag and drop should behave intuitively. In Reminders, dragging reminders between lists moves them instead of copying them because that’s what people expect. Dragging and dropping content between apps always results in a copy.
Whenever possible, let people undo drag and drop. Generally, when users inadvertently drop content in the wrong destination, they should be able to use Undo to return your app to its previous state. That is, the dropped content should be removed and, if it was moved from elsewhere in your app, restored to its original location.
Consider enabling spring loading. With spring loading, users can activate certain controls, like buttons and segmented controls, by dragging selected content over them and pausing briefly without dropping the content. For example, in Mail, selected messages can be dragged onto the navigation bar’s Back button to reach other locations in the mailbox hierarchy. Never make spring loading the only way to activate a control. Use it as an embellishment that can be discovered. In most cases, a spring-loaded control should also respond to a tap gesture. For developer guidance, see UISpringLoadedInteraction.
Providing Dragged Content
Customize the drag item preview if necessary. In general, the preview that’s displayed under the user’s finger should be a translucent representation of the content being dragged. This appearance provides context, indicates that a drag is in progress, and enables the user to see destinations beneath the dragged content.
Whenever possible, offer multiple representations of dragged data, ordered from highest to lowest fidelity. For example, when providing line art, your app could offer a PDF vector representation, a lossless PNG image with transparency, and a lossy JPEG image without transparency, in that order. That way, the destination can choose the highest quality representation that it can import.
When applicable, present native versions of custom objects as the richest form of data. For example, an app that lets people drag charts should present the native chart object first. Then, it should offer alternatives—like image versions of the chart—for apps that don’t support chart objects.
Implement a file provider extension when the transfer of your app’s content is time consuming or resource intensive. A file provider extension manages the transfer process and ensures that it completes, even if your app is no longer running. Note that the transfer process doesn’t begin until the user drops the content. For developer guidance, see NSFileProviderExtension.
Supply progress information when your app’s content needs time to transfer. Provide progress information if content must be downloaded or large files require time to copy. At minimum, provide the total size of the content so the destination can calculate the amount of time remaining and display an appropriate progress indicator. For developer guidance, see NSProgress.
Accepting Dropped Content
Use visual cues to identify potential destinations and preview the effect of dropping content. Highlighting, insertion point indicators, and animation are all good ways to identify possible destinations. A view could subtly flash and change color as content is dragged over it, or paragraphs could move apart to make room for a dragged image. When there is more than one possible destination onscreen, identify one at a time. Highlighting may be unnecessary if the source and destination containers are the same, unless the content is dragged completely out of the source and then reenters it. Make sure highlighting is removed when content is dropped or is no longer positioned above a destination.
Automatically scroll the contents of a destination when appropriate. When content is dragged outside the bounds of a destination, your app may need to determine whether to scroll the contents of the destination or to allow the user to 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 lengthy draft message in Mail automatically scrolls when content is dragged to the top or bottom of the body area. Standard text views and text fields automatically adopt this behavior.
Extract and display the richest possible representation of dropped content. For example, your app might be offered several representations of a chart. If your app supports charts, it could extract and display the native chart object. If your app doesn’t support charts, it could extract and display an image version of the chart instead.
When applicable, extract only the relevant portion of dropped content. For example, if a user drags a contact from Contacts to a recipient field in a Mail message, only the name and email address are used, not the contact’s address information.
Show placeholders in table views and collection views after content is dropped. Placeholders temporarily indicate where the content will reside once it finishes transferring.
Show progress when dropped content needs time to transfer. By default, the system displays an app-modal alert when a time-consuming transfer occurs between apps. Consider customizing the way progress is displayed—such as by showing progress indicators on placeholders within a table view or collection view—so the user isn’t blocked from using your app. Note that the transfer process doesn’t begin until the user drops the content.
Provide feedback when dropped content initiates a process. If the user drops content onto a control that initiates a task—for example, uploading a video to a sharing site—show that the task has begun and keep the user informed of its progress.
Inform the user when dropping fails. If the dropped content can’t be inserted, perhaps because a file transfer was interrupted, inform the user that the drop was unsuccessful.
Apply appropriate styling to dropped text. When the source and destination support the same styled text attributes, dropped text should maintain its original font, typeface, size, and other attributes. Otherwise, dropped text should adopt the destination’s style.
Consider providing a subtle, intuitive way to opt out when the user can't immediately undo drag and drop. A sharing app, for example, might present an intermediate share sheet before posting dropped content. This share sheet could offer a way to supply additional content like a status message, while also offering a cancellation button. Photos exhibits this behavior when a photo is dragged into a shared photo stream.