![](https://hackernoon.com/hn-images/1*3IIeDZy7NnarO_zPWahEag@2x.png)

With the release of **iOS-11**, Apple introduced **Drag and Drop** in `UITableView` and `UICollectionView` with a specialized API that works on the concept of **Interactions** (something like gestures).

Table view and collection view have similar APIs to support drag and drop with some small differences.

Drag and drop is supported in both **iPhone** as well as **iPad**. On iPad, user can drag-drop within multiple apps. But for iPhone this support is provided only within a single app.

We’ll be discussing how drag and drop works in collection views and the same will be applicable to table views. I’ll point out the differences in table view wherever required. So don’t worry about it. You’ll get it working for both collection view as well as the table view.

### Let’s get started 🚀

Adopting drag and drop in collection view is a multi-step process. We’ll go through each and every detail required to integrate dragging and dropping elements in the collection view.

#### UICollectionViewDragDelegate

To enable **drags**, the custom object must conform to `[UICollectionViewDragDelegate](https://developer.apple.com/documentation/uikit/uicollectionviewdragdelegate)` protocol.

It contains multiple methods that can be implemented to customize the drag behaviour of the collection view.

The only **required method** of this protocol you need to put in place to support drag behaviour is:

[collectionView(\_:itemsForBeginning:at:)](https://developer.apple.com/documentation/uikit/uicollectionviewdragdelegate/2897389-collectionview)

We’ll look into the method details in upcoming sections.

Also, set the `dragDelegate` delegate object of collection view in `viewDidLoad()` to manage the dragging of items from it.

collectionView.dragDelegate = self

#### UICollectionViewDropDelegate Protocol

To enable **drops**, the custom object must conform to `[UICollectionViewDropDelegate](https://developer.apple.com/documentation/uikit/uicollectionviewdropdelegate)` protocol.

The only **required method** of this protocol is:

[collectionView(\_:performDropWith:)](https://developer.apple.com/documentation/uikit/uicollectionviewdropdelegate/2897304-collectionview)

You can implement other methods as needed to customize the drop behavior of your collection view.

Also, assign your custom delegate object to the `dropDelegate` property of your collection view in `viewDidLoad()`.

collectionView.dropDelegate = self

#### Enabling Drag Interaction

To enable/disable drags , you can customize `dragInteractionEnabled` property of your collection view.

The default value of this property is true on iPad and false on iPhone.

So, set it to **true** to enable content dragging from your collection view if you are providing drag-drop support in iPhone.

collectionView.dragInteractionEnabled = true

#### Dragging a Single Item

Now that we have configured our collection view to support drags and drops, its time to actually write the code that will make it happen.

Let’s start with the introduction to some important classes required to support drags and drops. Here we go:

1.  [NSItemProvider](https://developer.apple.com/documentation/foundation/nsitemprovider) **—** An item provider for conveying data or a file between processes during drag and drop.
2.  [UIDragItem](https://developer.apple.com/documentation/uikit/uidragitem) **—** A representation of an underlying data item being dragged from one location to another.

Each item that needs to be dragged must be represented as an object of `UIDragItem`.

To allow dragging of items from your collection view, implement the only required method of `UICollectionViewDragDelegate` and return one or more `UIDragItem` objects for the item at the specified `indexPath`.

OMG ! 😯 What was that? Too much to understand..!!!

Don’t worry. We’ll go through each step in the below code:

![](https://avatars1.githubusercontent.com/u/22985285?s=400&v=4)

Let’s see what the code says..

1.  Line 1 — implement the`collectionView(_:itemsForBeginning:at:)` method of `UICollectionViewDragDelegate` .
2.  Line 3 — Get the data corresponding to the picked item’s `indexPath` . Use the model that you are using as collection view’s data source.  
    Here I have used an array of `String` objects as the data source to the collection view. So, item will correspond to a `String` value.
3.  Line 4 — Create an object of `NSItemProvider` using the `item` extracted in Line 3. `item` is casted into `NSString` because `**NSItemProvider**` **accepts an object** and swift `String` is a value-type not an object-type.
4.  Line 5 — Create a `UIDragItem` object from `itemProvider`.
5.  Line 6 — `localObject` is the custom object associated with the drag item. It is only available to the app that initiates the drag activity.   
    This is **optional** but makes it faster to drag and drop content within the same app.
6.  Line 7 — Return an **array** of `dragItem` .

In case you want to ignore the drag, return an empty array.

#### Dragging Multiple Items

We have seen how to drag a single item from collection view. What if I want to drag multiple items in one go?

Well, we have a `UICollectionViewDragDelegate` method to achieve that.

[collectionView(\_:itemsForAddingTo:at:point:)](https://developer.apple.com/documentation/uikit/uicollectionviewdragdelegate/2897367-collectionview)

This method adds the specified items to an existing drag session.

Items are added to the active drag session with a **single tap**. If you do not implement this method, taps in the collection view trigger the selection of items or other behaviors.

It has the similar implementation as that of `collectionView(_:itemsForBeginning:at:)` .

![](https://avatars1.githubusercontent.com/u/22985285?s=400&v=4)

You can add your own constraints as per your requirement.

**Example**: ignore adding the item if it already exist in collection view in which you are dropping it. In this case return an empty array.

#### Drop Proposal — UICollectionViewDropProposal

We picked the item and then dragged it. Now, we cannot just keep on dragging the item for long. What to do with it now? Where to drop it? What will happen when I drop the item?

All of these questions point to a very specific one :  
 “How do you intend to handle the drop at a specified location?   
Do you want to copy the item or just move it to a new position?   
Or do you want to forbid the movement in some specific conditions?   
Oh no..!! Can I just cancel it?”

Well well well..!!! There is a single answer to all your question — **Drop Proposal.** A drop proposal as the name suggests is the proposal of how you intend to handle the drop at a specific location when the user lifts his finger.

[UIDropProposal](https://developer.apple.com/documentation/uikit/uidropproposal) — A configuration for the behavior of a drop interaction, required if a view accepts drop activities.

Each proposal defines an **operation** — [enum UIDropOperation](https://developer.apple.com/documentation/uikit/uidropoperation), that determines how a drag and drop activity resolves when the user drops a drag item. An operation is defined by can be of type:

1.  `cancel` — no data should be transferred, canceling the drag.
2.  `forbidden` — although a move or copy operation is typically legitimate in this scenario, the drop activity is not allowed.
3.  `copy` — data represented by the drag items should be copied to the destination view.
4.  `move` — data represented by the drag items should be moved, not copied.

[UICollectionViewDropProposal](https://developer.apple.com/documentation/uikit/uicollectionviewdropproposal) — A subclass of UIDropProposal dedicated to collection views for handling drop proposals.

A collection view proposal also defines an optional **intent** — [enum UICollectionViewDropIntent](https://developer.apple.com/documentation/uikit/uicollectionviewdropintent), that determines how to incorporate the content into the collection view. You can insert the content between items or add it to an existing item. Possible values of an intent are:

1.  `unspecified` — No drop proposal was specified.
2.  `insertAtDestinationIndexPath` — Insert the dropped items at the specified index path.
3.  `insertIntoDestinationIndexPath` — Incorporate the dropped items into the item at the specified index path.

The collection view uses `intent` information to provide appropriate **visual feedback** to the user.

Now that we know what a drop proposal is, the thing we need to figure out now is how and where to implement it.

`UICollectionViewDropDelegate` provides a method where you can specify the drop proposal you want to use, that is:

[collectionView(\_:dropSessionDidUpdate:withDestinationIndexPath:)](https://developer.apple.com/documentation/uikit/uicollectionviewdropdelegate/2897375-collectionview)

While the user is dragging content, the collection view calls this method repeatedly to determine how you would handle the drop if it occurred at the specified location.

Because this method is called repeatedly while the user drags over the collection view, **your implementation should return as quickly as possible**.

![](https://avatars1.githubusercontent.com/u/22985285?s=400&v=4)

In the above code I have used 2 properties:

1.  [localDragSession](https://developer.apple.com/documentation/uikit/uidropsession/2890985-localdragsession) — The local drag session is `nil` if the drag activity started in a different app.
2.  [hasActiveDrag](https://developer.apple.com/documentation/uikit/uicollectionview/2897415-hasactivedrag) — A Boolean value indicating whether items were lifted from the collection view and have not yet been dropped.

So here is what the above code speaks:

1.  Line 16 — If the drag activity started in another app, **forbid** the drop.
2.  Line 7 — Else, if the item was lifted from the same collection view in which you are dropping it, then **move (reorder)** it from source to destination index path.
3.  Line 11 — Otherwise, if you are dropping it in another collection view, then **copy** the item to the destination index path.

#### Handling Drop — Copy

After being clear about how we intend to handle the drop, let’s look at the implementation details of what we need to do once the actual drop is made.

To allow dropping of items in your collection view, implement the only required method of `UICollectionViewDropDelegate`.

That is:  
`collectionView(_:performDropWith:)` — Tells your delegate to incorporate the drop data into the collection view.

This method provides you with a [UICollectionViewDropCoordinator](https://developer.apple.com/documentation/uikit/uicollectionviewdropcoordinator) object that you can use to handle the drop. Using `coordinator`, you can fetch the below items to update your collection view’s data source:

1.  `items` — The items being dragged
2.  `destinationIndexPath` — The index path at which to insert the item in the collection view. It is an **optional** value. `nil` is returned in case the item is inserted in an empty collection view or at the end of the collection view.
3.  `proposal` — The current proposal for how to incorporate the dropped items

Also, when incorporating items, use `drop(_:to:)` or `drop(_:toItemAt:)` methods of the `coordinator` object to animate the transition from the drag item's preview to the corresponding item in your collection view.

Let’s look at some code now.

![](https://avatars1.githubusercontent.com/u/22985285?s=400&v=4)

The above code is pretty straight forward:

1.  `destinationIndexPath` is fetched from the `coordinator` . In case it is `nil`, the last index path of the collection view is used as the destination to drop the item.
2.  Take appropriate action to update the collection view based on the drop proposal’s `operation` — `move/copy/forbidden/cancel`.

In case your drop proposal is `**cancel/forbidden**`, `collectionView(_:performDropWith:)` won’t be called for handling the drops and hence you need not do anything special about it.

If the proposed handling is `**move**` , we need to reorder the items. We’ll discuss more about reordering in the next section.

In this section, let’s have a look at how to handle drop if we intend to `**copy**` the items.

You can use collection view’s `[performBatchUpdates(_:completion:)](https://developer.apple.com/documentation/uikit/uicollectionview/1618045-performbatchupdates)` to make changes in the collection view.

You can use this method in cases where you want to make multiple changes to the collection view in one single animated operation, as opposed to in several separate animations.

Deletes are processed before inserts in batch operations. This means the indexes for the deletions are processed relative to the indexes of the collection view’s state before the batch operation, and the indexes for the insertions are processed relative to the indexes of the state after all the deletions in the batch operation.

Here is how you can do it:

![](https://avatars1.githubusercontent.com/u/22985285?s=400&v=4)

To get the data corresponding to dragged item, you can use one of the below options:

1.  `localObject` property of the drag item can be used if it is set. It will be available if the content is originated from elsewhere in your app.
2.  Also, you can use the drag item’s `itemProvider` property to fetch the data.

#### Handling Drop — Reordering

Reordering of the cells occur when the drop proposal is specified as — **move**.

**Reordering** — Moving an item from source index path to destination index path within same/different collection view or table view as per your requirement.

I am explicitly referring to table view here because table view and collection view handle reordering a bit differently. We’ll discuss both of them here.

**In table views**, reordering functionality is already available since a long time. And the good thing is we can continue using that 😅. No need to do anything special to support reordering in table views. You just need to:

1.  Return `move` as your drop proposal in `[tableView(_:dropSessionDidUpdate:withDestinationIndexPath:)](https://developer.apple.com/documentation/uikit/uitableviewdropdelegate/2897302-tableview)` to support reordering.
2.  Implement `[tableView(_:canMoveRowAt:)](https://developer.apple.com/documentation/uikit/uitableviewdatasource/1614927-tableview)` and `[tableView(_:moveRowAt:to:)](https://developer.apple.com/documentation/uikit/uitableviewdatasource/1614867-tableview)` methods of `UITableViewDataSource`.

![](https://avatars1.githubusercontent.com/u/22985285?s=400&v=4)

`[tableView(_:performDropWith:)](https://developer.apple.com/documentation/uikit/uitableviewdropdelegate/2897427-tableview)` won’t be called for handling drops if the above `UITableViewDataSource` methods are implemented.

**In collection views**, reordering is handled in the same manner as copying. The only difference is — **in copying** you were inserting a brand new item at the destination index path, but **in reordering** you need to delete an item from source index path and insert it at the destination index path.

The logic is changed a bit, rest everything remains same.

**Note:** the `destinationIndexPath` obtained from `coordinator` in `collectionView(_:performDropWith:)` could be the number of items in collection view if you try to reorder the item to the end of the collection view. In case of reordering, number of items in collection view remain same. So you need to handle that explicitly as it might throw `Array index out of bounds` runtime error.

Oh Wait ! I have `destinationIndexPath` , but from where do I get `sourceIndexPath`?

Well, we have an answer for that too.

`[sourceIndexPath](https://developer.apple.com/documentation/uikit/uicollectionviewdropitem/2897392-sourceindexpath)` can be obtained corresponding to each item fetched using `coordinator` . If the item is originated from the same collection view, this property contains the item’s original index path.

![](https://avatars1.githubusercontent.com/u/22985285?s=400&v=4)

In the above code, a single item is reordered. You can do it for multiple items as per your requirement.

#### Reordering Speed — reorderingCadence

In case of reordering, when you drag an item over a collection view which accepts a drop, the collection view provides an appropriate visual feedback to the user — shifting/reordering the cells to accomodate a new one.

We can control the reordering speed for a better user experience using [reorderingCadence](https://developer.apple.com/documentation/uikit/uicollectionview/2897347-reorderingcadence) of type [enum UICollectionViewReorderingCadence](https://developer.apple.com/documentation/uikit/uicollectionviewreorderingcadence) on collection view object.

`reorderingCadence` can have these possible values:

1.  `immediate` — Items are reordered into place immediately. (**default value**)
2.  `fast` — Items are reordered quickly, but with a short delay.
3.  `slow` — Items are reordered after a delay.

Set the appropriate value of `reorderingCadence` on your collection view object in `viewDidLoad()`.

collectionView.reorderingCadence = .fast

#### Drag Preview — UIDragPreviewParameters

When an item is lifted, the collection view uses the item’s visible bounds to create the preview by default. In case you want to customize the appearance of the item, you can achieve it through preview parameters.

[UIDragPreviewParameters](https://developer.apple.com/documentation/uikit/uidragpreviewparameters) — A set of parameters for adjusting the appearance of a drag item preview.

The parameters specify different visual aspects of the preview, including the background color and the visible area of the view associated with the preview.

In case you don’t want to make any changes to the drag preview, don’t implement this method or return `nil` if you implement it.

To customize the drag preview, implement `[collectionView(_:dragPreviewParametersForItemAt:)](https://developer.apple.com/documentation/uikit/uicollectionviewdragdelegate/2897459-collectionview)` method of `UICollectionViewDropDelegate` .

![](https://avatars1.githubusercontent.com/u/22985285?s=400&v=4)

That’s it. That’s all you need to get drop-drop working in collection and table view. Go on..give it a try !!

### Sample Project

You can download the sample project from [here](https://github.com/pgpt10/DragAndDrop-CollectionView).

![](https://hackernoon.com/hn-images/1*ST2JF7fK3Ao5L82amVt0RA.gif)

### Promotions

Don’t forget to read my other articles:

1.  [Everything about Codable in Swift 4](https://hackernoon.com/everything-about-codable-in-swift-4-97d0e18a2999 "https://hackernoon.com/everything-about-codable-in-swift-4-97d0e18a2999")
2.  [Everything you’ve always wanted to know about notifications in iOS](https://medium.freecodecamp.org/ios-10-notifications-inshorts-all-in-one-ad727e03983a)
3.  [Color it with GRADIENTS — iOS](https://hackernoon.com/color-it-with-gradients-ios-a4b374c3c79f)
4.  [All you need to know about Today Extensions (Widget) in iOS 10](https://hackernoon.com/app-extensions-and-today-extensions-widget-in-ios-10-e2d9fd9957a8 "https://hackernoon.com/app-extensions-and-today-extensions-widget-in-ios-10-e2d9fd9957a8")
5.  [UICollectionViewCell selection made easy..!!](https://hackernoon.com/uicollectionviewcell-selection-made-easy-41dae148379d "https://hackernoon.com/uicollectionviewcell-selection-made-easy-41dae148379d")

Feel free to leave comments in case you have any doubts.

Apple

Fetch

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Coding for iOS 11: How to drag & drop into collections & tables

Too Long; Didn't Read

Companies Mentioned

@p.gpt10

RELATED STORIES