Sneak peek into iOS 11 Drag & Drop API using Swift

iOS 11 brought a lot of new APIs. That allows us to make users` interaction with an app much more intuitive and pleasant. But one feature definitely caught my attention, it’s a Drag&Drop between different applications. I think it’s a game changer in the way how users interact with several apps at once.

The realization of this feature seems to be quite difficult, but I want to assure you that it’s not. Today we will build a simple mobile app that allows the user to drag images from any app to our app.


Firstly, you need Xcode 9, which you may download from Official Apple’s website. If you decide to test app we’re going to build on a real device, make sure that it runs on iOS 11. We won’t create any additional elements, we’ll work with a ViewController class created by default.

To be able to handle this Drag&Drop we will use methods from a new UIDropInteractionDelegate. It has a big variety of optional methods that you may use in your app. We will have to implement only 3 optional methods that will help us to organize and handle the process of Drag&Drop:

Also, we need to make sure that our class conforms to that new API protocol. We have to tell to Xcode that our view supports such kind of interactions (Drag&Drop of images). To do so just add UIDropInteraction and mention that our ViewController class is a delegate of this interaction:

After adding a new interaction with our view, you should have something like this in your ViewController class:

Ok, now we basically have everything set to make our app work. Let’s get a picture from a Drag&Drop session and put it on the top of our view. We will use the first delegate method for getting our picture and handling end of Drag&Drop. I will show you the code and then will describe every step in details:

Now let’s have a look what we’ve done:

  1. After we made a drop we may access our items with a property session.items that returns an array (because potentially we may drag more than 1 item). So we iterate through these items.
  2. To get an object from a dragged item we call itemProvider property (it’s a get-only property) and then we call a method that returns a closure with an object and error. Keep in mind: you also have to type the class of your object, it will be UIImage.self in our case
  3. Then by using a guard construction we check if the error is nil. If we have an error we print the error message and exit this method.
  4. In this closure we received an optional object, so we have to check if it’s really is a kind of class UIImage. We do it using a guard construction.
  5. Our method dragItem.itemProvider.loadObject(…) does some asynchronous work. So if we want to add work with UI and to add our image to our view we have to make sure that we do it on the main thread.
  6. And finally we create a UIImageView with our image and we add this view as a subview on our main view. Then we set its frame to make it the same as our picture’s frame. By using a property session.location(in: self.view) we place a center of our UIImageView in the point of our finger.

Now let’s check out the result:

Conclusion

We implemented a basic functionality of a very powerful new feature — Drag&Drop. As a developer, you can handle Drag&Drop of not only images but also text, links, etc. After you calculated where user dragged an object you may put it in any visual container: UITableViewCell, UICollectionView, UIView, etc. Apple provided a huge variety of delegate methods that allows you easily implement this functionality.

You can find all the sample code in this Github repository. Thanks for reading :)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.