Difference between revisions of "An Introduction to Drag and Drop in iOS"

Revision as of 14:44, 27 March 2018

iOS 11 has introduced a long anticipated feature in the form of drag and drop support. Drag and drop allows items in the form of views, images, files and data to be dragged and dropped either between different apps or different areas within the same app. This chapter is intended to provide a high level overview of the way in which drag and drop works on iOS. Once these basics have been covered, subsequent chapters will explore the key aspects of drag and drop implementation in greater detail while working through the creation of two example applications.

An Overview of Drag and Drop

Drag and drop allows users to drag and drop content and data. On iPad devices, drag and drop can be performed either between apps or locally within a single app. Dragging and dropping between apps relies on the multitasking abilities of iOS on the iPad to be able to display multiple apps simultaneously. On iPhone devices, drag and drop is only supported within the local app.

A drag is initiated by performing a long press on top of the user interface element to be dragged. If drag and drop is supported, the item will appear to lift up in the form of a preview image. This has initiated a drag session (UIDragSession) which remains in effect until the drag is either cancelled or completed. The preview image is then dragged by the user to the destination. If the destination is capable of handling the item type being dragged, an indicator will appear to let the user know the item can be dropped. If a drop is attempted in a location where the drop is not supported, the drag is cancelled. Drop locations may also be configured to display a “forbidden” icon alongside the drag preview image if the data type is not supported.

Multiple items can be added to a drag session by initiating the drag and then tapping other items to be included in the session. Preview images for these additional items will appear stacked with the original preview image and an icon will appear containing the number of items contained in the session. In addition, multiple drag sessions can be performed concurrently.

When a drop is performed, the transfer of the data associated with the item is performed asynchronously so as not to impair app performance.

Drag and Drop Delegates

Drag and drop in iOS functions almost entirely through delegate methods. In order for a drag operation to work, the containing view controller must have a drag delegate assigned to it. Similarly, the destination view controller must be assigned a drop delegate. Typically a view controller will be assigned both drag and drop delegates so that the controller can act as both a drag source and drop destination.

Drag and Drop Interactions

Once the view controller has been assigned the necessary delegates, the individual views within the controller that are to support drag and drop need to have interaction objects attached. A drag source view will have a drag interaction (UIDragInteraction) attached, while a drop view will be assigned a drop interaction (UIDropInteraction). A view that is to serve both as a drag source and a drop destination must, of course, have both. These interactions have a wide range of delegate methods which, if implemented, will be called at various points during the lifecycle of the drag and drop session.

The Drag Item

Each item associated with a drag operation is represented by a drag item (UIDragItem) object. This object contains the preview image to be displayed during the drag and an item provider (UIItemProvider) instance. The item provider contains information about the item to be transferred and will be used to initiate the asynchronous data transfer when the item is dropped. Apple refers to this item provider object as a promise from the source app to deliver the content for the dragged item when the drop is performed.

The Drag and Drop Lifecycle

The lifecycle of a drag and drop session is handled entirely by calls to the drag and drop interaction delegate methods and the return values from those methods. A summary of the key delegate method calls are listed below in the order in which they are called during the session lifecycle.

• itemsForBeginning – Called when the user starts the drag with a long press on the source view. This method is mandatory and must return an array of UIDragItem objects representing the items to be dragged.
• previewForLifting – An optional method that is called to provide the app with the option of providing a custom preview image to be displayed for the item during the drag.
• itemsForAddingTo – This optional method is called when a draggable view is tapped while a drag session is already in progress. The method returns an array containing the UIDragItem objects to be added to the existing drag operation.
• sessionDidUpdate – Called repeatedly when the drag enters and moves within the area of potential drop destinations. This method returns a UIDropProposal object containing the operation that will be performed if the drop is made. For example, if the view cannot handle the drop it might return a cancel or forbidden operation value. Alternatively, if the drop can be handled, a copy or move value would be returned.
• canHandle – An optional method called when the drag session enters a potential drop destination view. This method is passed a UIDropSession object on which the canLoadObjects method can be called to identify if the session contains objects that the drop destination is able to handle. The method returns a Boolean value indicating whether or not the dragged item object type is supported.
• performDrop – This mandatory method is called when the user performs the drop and is passed UIDropInteraction and UIDropSession objects. These objects can then be used to perform the asynchronous transfer of the dragged items. When the transfer is initiated, a UIProgress object is returned which may be used within the code to track the progress of the data transfer and also to cancel the transfer before completion if necessary. When the transfer finishes, a completion handler is called allowing the app to process the data.

Note that this is a list of only the most commonly used delegate methods. Many more are available for performing tasks such as adding animation and receiving notifications at additional points along the drag and drop session timeline, some of which will be used in later chapters.

Spring Loaded Controls

Another feature available during a drag and drop session is to activate controls such as buttons by dragging over the view and holding for a brief period of time. This enables controls within the user interface to be selected without interrupting the drag session. This concept is referred to as spring loading and is enabled on a per control basis by setting the control’s isSpringLoaded property to true.

Summary

Drag and drop support has been introduced in iOS 11 to allow users to transfer data between apps using a drag and drop paradigm. While drag and drop on iPhone devices is limited to dragging and dropping within a single app, iPad apps may also transfer data between different apps. Each drag and drop operation is represented by a drag session containing one or more drag items. Each drag item, in turn, contains an item provider. The core functionality of drag and drop is implemented using sets of drag and drop interaction delegate methods. These are called at various times during the drag and drop operation to obtain the data to be transferred, to identify whether a drop site can handle particular data types and to otherwise respond to and customize various aspects of the drag and drop session.