Drag and Drop Collection View cell in IOS 11 & swift 4

In this tutorial we are explain how to drag and drop collection view cell in two collection View at same screen in iPhone IOS 11. In IOS 11 apple introduced the Two type of protocols UICollectionViewDragDelegate and UICollectionViewDropDelegate, By the use of these protocol methods methods we can drag and drop the collection View cell from one collection View to other collection View.

NOTE:- please note that Drag-Drop supported in both iPhone and iPad, On iPad use Drag-Drop between different apps, same app, and same screen, But in iPhone use Drag-Drop only on similar screen.

First create the base project

Create the base project with two collectionView on same screen by the use of CollectionViewDataSource and CollectionViewDelegate methods. You can download the base project from here.

Now we start the Drag and drop Delegate for move the CollectionViewCell from on FirstCollectionView to SecondCollectionView.

Drag the collection view Cell (UICollectionViewDragDelegate protocol)

First we need to implement itemsForBeginning methods of drag delegate in which we need to return array of UIDragItem.

NOTE:- Must Be remember set the dragDelegate to self. And enable the dragInteraction.

 override func viewDidLoad() {
        topCollectionView?.dragDelegate = self
        topCollectionView.dragInteractionEnabled = true

itemsForBeginning -> Provide items to begin a drag associated with a given indexPath. If an empty array is returned a drag session will not begin.
For create the UIDragItem, First we need to create NSItemProvider and that item provider pass into UIDragItem(itemProvider:)

extension ViewController: UICollectionViewDragDelegate {
    func collectionView(_ collectionView: UICollectionView, itemsForBeginning session: UIDragSession, at indexPath: IndexPath) -> [UIDragItem] {
        let dragItem = self.dragItem(forPhotoAt: indexPath)
        return [dragItem]
    /// Helper method
    private func dragItem(forPhotoAt indexPath: IndexPath) -> UIDragItem {
        let imageName = self.arrayFirst[indexPath.row]
        let image = UIImage(named: imageName)
        let itemProvider = NSItemProvider(object: imageName as NSItemProviderWriting)
        let dragItem = UIDragItem(itemProvider: itemProvider)
        dragItem.localObject = imageName
        return dragItem

Drop the collection view Cell (CollectionViewDropDelegate protocol)

Now first we set the CollectionViewDropDelegate to self for that collection view in which we want to drop the collectionViewCell

    bottomCollectionView.dropDelegate = self

Implement the method for handle the drop session for drop item. for this method DropDelegate provide the method canHandle session:. If we not handle this methods then by default this return “YES”

 func collectionView(_ collectionView: UICollectionView, canHandle session: UIDropSession) -> Bool {
        return session.canLoadObjects(ofClass: NSString.self)

Now implement these methods for drop the item in collectionView

 func collectionView(_ collectionView: UICollectionView, performDropWith coordinator: UICollectionViewDropCoordinator) {

        let destinationIndexPath = coordinator.destinationIndexPath ?? IndexPath(item: 0, section: 0)
        loadAndInsertItems(at: destinationIndexPath, with: coordinator)
    func collectionView(_ collectionView: UICollectionView, dropSessionDidUpdate session: UIDropSession, withDestinationIndexPath destinationIndexPath: IndexPath?) -> UICollectionViewDropProposal {
        return UICollectionViewDropProposal(operation: .copy, intent: .insertAtDestinationIndexPath)
    private func loadAndInsertItems(at destinationIndexPath: IndexPath, with coordinator: UICollectionViewDropCoordinator) {
        let destinationIndexPath: IndexPath
        if let indexPath = coordinator.destinationIndexPath {
            destinationIndexPath = indexPath
        } else {
            let section = bottomCollectionView.numberOfSections - 1
            let row = bottomCollectionView.numberOfItems(inSection: section)
            destinationIndexPath = IndexPath(row: row, section: section)
        coordinator.session.loadObjects(ofClass: NSString.self) { items in
            guard let string = items as? [String] else { return }
            var indexPaths = [IndexPath]()
            for (index, value) in string.enumerated() {
                let indexPath = IndexPath(row: destinationIndexPath.row + index, section: destinationIndexPath.section)
                self.arraySecond.insert(value, at: indexPath.row)
            self.bottomCollectionView.insertItems(at: indexPaths)

Download the complete project here.


Related Post

Resignation Letter and Relieving Letter Resignation Letter Sample 1 Sender’s Name, Sender’s Address, Mobile Number, MailDate:ToThe Human Resource Department Company Name Company Addre...
New features in XCode 10 Supported Configurations Xcode 10 beta requires a Mac running macOS 10.13.4 or later Xcode 10 beta includes SDKs for iOS 12, watchOS 5, macOS ...
Introduction to JVM Introduction to JVM JVM stands for Java Virtual Machine. It works as an engine that derives the Java Code. The JVM does not understand Java ty...
Compile C/C++ program (Dev-C/C++) what is Dev-C/C++? Dev-C/C++, developed by Bloodshed Software, is a fully featured graphical IDE(Integrated Development Environment),which ...
Break Statement in JAVA Break Statement in JAVA The break statement is usually used in following two scenarios: The break statement terminates the loop immediately, and...
Dart Introduction | Dart programming language Dart Introduction Dart is a scalable language that you can use to write simple scripts or full featured apps. Whether you’re creating a mobile app, w...

Write A Comment