Drag and Drop Tutorial for iOS

Adding Drag Support to a Custom View

You’ve seen how to add drag and drop support to collection views. Adding this support to table views follows a similar process.

You can also add drag and drop functionality to custom views. The basic steps involve:

• Adding an interaction object to the custom view.
• Implementing the protocol methods in the interaction delegate to provide or to consume data.

It’s time to introduce CacheEditor, your companion app for editing geocaches. Change the active scheme to CacheEditor. Build and run the app then rotate the device to landscape mode:

View CacheMaker in Split View, placing it to the left of CacheEditor. Resize the Split View so both apps take up about half the width:

Try dragging a geocache from CacheEditor into CacheMaker. You’re in for a frustrating experience, my friend.

You’ll be working with one key file in CacheEditor, CacheDetailViewController.swift, which displays geocache details. Open that file and add the following code to the end:

// MARK: - UIDragInteractionDelegate
extension CacheDetailViewController: UIDragInteractionDelegate {
  func dragInteraction(
    _ interaction: UIDragInteraction, 
    itemsForBeginning session: UIDragSession) 
      -> [UIDragItem] {
    let itemProvider = NSItemProvider(object: geocache)
    let dragItem = UIDragItem(itemProvider: itemProvider)
    return [ dragItem ]
  }
}

Here, you adopt UIDragInteractionDelegate and implement the method that’s called when a drag activity starts. The code should look similar to what you’ve seen in CacheMaker. You return drag items with a geocache as the item provider.

Add the following to viewDidLoad() right after the call to super:

view.addInteraction(UIDragInteraction(delegate: self))  

Here, you create a drag interaction with the view controller as the delegate. You then add the interaction to the view.

Build and run CacheEditor. Verify that you can now drag a geocache from CacheEditor and drop it into CacheMaker:

Try dragging a geocache from CacheMaker into CacheEditor. While the drag starts, it doesn’t drop. That’s your next mission.

Adding Drop Support to a Custom View

Still in CacheDetailViewController.swift, add the following to the end of the file:

// MARK: - UIDropInteractionDelegate
extension CacheDetailViewController : UIDropInteractionDelegate {
  func dropInteraction(
    _ interaction: UIDropInteraction, 
    canHandle session: UIDropSession) 
      -> Bool {
    return session.canLoadObjects(ofClass: Geocache.self)
  }

  func dropInteraction(
    _ interaction: UIDropInteraction, 
    sessionDidUpdate session: UIDropSession) 
      -> UIDropProposal {
    return UIDropProposal(operation: .copy)
  }

  func dropInteraction(
      _ interaction: UIDropInteraction, 
      performDrop session: UIDropSession) {
    session.loadObjects(ofClass: Geocache.self) { items in
      if let geocaches = items as? [Geocache],
        let geocache = geocaches.first {
        self.geocache = geocache
        self.configureView()
      }
    }
  }
}

Here, you adopt UIDropInteractionDelegate and implement the optional methods to track and properly handle drops.

The first method restricts drops to apps that pass in a Geocache object.

The second method returns a copy operation as the proposed method to handle drops. This method is called when the user drags an item over the drop interaction’s view. Even though this protocol method is optional, you need to implement it to accept drops.

The last protocol method is called when the drop gesture is completed. You grab the item provider from the session and start the data fetch. Then, you load in the first geocache and update the view.

Next, add this code to viewDidLoad() after the drag interaction setup:

view.addInteraction(UIDropInteraction(delegate: self))  

With this, you create a drop interaction and set the view controller as the delegate. You then add the interaction to the view.

Build and run the app. Verify that you can drop a geocache into CacheEditor:

With very few lines of code, you’ve added drag and drop support to a custom view.

Where to Go From Here?

Congratulations! You’ve used drag and drop to make the geocache management sample apps functional.

Use the Download Materials button at the top or bottom of this tutorial to download the final project.

You should now be able to add drag and drop to supercharge many in-app and cross-app experiences. Check out the Drag and Drop in Table and Collection Views and Drag and Drop with Multiple Data Representations and Custom Views video tutorials for additional tips and to see how to add this functionality to table views.

I hope you enjoyed this tutorial. If you have any comments or questions, please join the forum discussion below!