In WWDC 2017, Apple released a host of very interesting APIs, including Drag and Drop. We were particularly excited to get our hands on this owing to how much it would enhance the user experience in our supported applications.
What is this feature is all about?
Drag and Drop, an iOS 11 feature, allows the user to transfer content from one app to another in a very simple and efficient manner.
Select the content which you want to move, drag it and drop it. It is now that simple to transfer content like files, text, images from other apps into the Signeasy app and vice versa.
How did content transfer work earlier?
Say a user wants to move a document into the Signeasy app. They would do so by either importing the file from the in-app integrations with Mail/Cloud Providers/Photo or use the Open In Functionality. For the former to work, the user needs to make sure that the file should be available in the above containers. This overall isn’t very intuitive.
Now let’s consider another situation, where a user is editing a document and she wants to add some text or image which can be her residential address, a logo or any other piece of information. There are two ways in which the user would do this - either she types it directly into the box or if she already has the address saved in notes, her photo is present in the Photos app - she can copy and import the photo. But again - these don’t feel very natural.
All that the user is concerned about is getting its content where it has to be placed. Drag and Drop makes this a 1-step process - select the content and drop it where you want to place. It’s that simple now.
Implementation:
Note: Drag and Drop is available across apps in iPad only. In iPhone, drag and drop is available only within an app.
We support the following drag and drop scenarios:
- Dropping file in Document List Screen.
- Dragging Signed files from Document List Screen.
- Dropping Text/Image in PDFEditing Screen.
Scenario 1: Dropping file in Document List Screen
Here a controller needs to conform to UIDropInteractionDelegate and add a Drop Interaction to the View Controller's view.
The following delegate methods are used:
- dropInteraction(_ interaction: UIDropInteraction, canHandle session: UIDropSession)
Returns true so that we can offer a Forbidden drop proposal if session cannot load objects of accepted content-types.
Returns false if there is a local drag session since we don’t support local drag sessions.
- dropInteraction(_ interaction: UIDropInteraction, sessionDidEnter session: UIDropSession)
Here we show the DropView in an animated manner which shows a green circle informing the user that YES, I accept a drop, so please drop the files.
- dropInteraction(_ interaction: UIDropInteraction, sessionDidExit session: UIDropSession), dropInteraction(_ interaction: UIDropInteraction, sessionDidEnd session: UIDropSession)
Removes the drop view.
- dropInteraction(_ interaction: UIDropInteraction, sessionDidUpdate session: UIDropSession) -> UIDropProposal
It validates the drop session and returns an appropriate UIDropProposal.
- dropInteraction(_ interaction: UIDropInteraction, performDrop session: UIDropSession)
It extracts the necessary information from session items, accesses the item’s ItemProvider and if successful, processes the file.
Here, a conformance to NSItemProviderReading is used in checking whether the file format is supported or not. The protocol method also configures the right set of properties which is then used in performDrop call.
Scenario 2: Dragging Signed files from Document List Screen.
DraggedFile.swift:
Class DraggedFile should conform to NSItemProviderWriting. This sets up the right UTIs and is responsible for giving the file to the destination application.
DisplayListViewController+Drag.swift:
Here, configure the Drag delegate of the table view.
tableView(_ tableView: UITableView, itemsForBeginning session: UIDragSession, at indexPath: IndexPath) -> [UIDragItem] :
Checks whether the file being dragged is a signed file. If yes then it makes a UIDragItem from it. If the file is not a signed file, then it returns an empty drag item since we don't support dragging non-signed files.
Scenario 3: Dropping Text/Image on a document while editing.
dropInteraction(_ interaction: UIDropInteraction, performDrop session: UIDropSession):
Gets the currently visible page, computes the touch point and the page index.
Accesses the session.items and gets the item’s ItemProvider.
We’d love to hear if you implemented the drag n’ drop feature as well, and how - so do get in touch if you want to share your experience or if you have any questions!
Moreover, if you're the one looking to do all of such exciting stuff every day, write to us at [email protected]. We're looking for talented developers like you. :)
Sources:
.png)
