SWIFT – Reorder cells in UICollectionView using drag & drop

[SWIFT] Reorder cells in UICollectionView using drag & drop

In this tutorial, I will cover how to reorder cells in UICollectionView using drag & drop. I have seen many different approaches on how to do this, some are working decent and some are not. That’s why I will show you the approach that is tested and working 100%.

To make this tutorial shorter, I will only present how to do the reordering and won’t show all the required delegate methods. Since you got here, I count that you already know the UICollectionView basics.

Recommended for you: I ❤ Swift [Part 1] — UIViewController & Extensions

UICollectionViewDelegate

We will start by using two delegate methods from the UICollectionViewDelegate protocol.

1Enable the use of moving items in the UICollectionView by calling canMoveItemAt delegate method. Passing true will enable this feature.

func collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath) -> Bool {
   return true
}

2Next, we will implement the moveItemAt delegate method where you will intercept the starting index and the ending index of the both items that are switching places.

func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
   print(“Starting Index: \(sourceIndexPath.item)”)
   print(“Ending Index: \(destinationIndexPath.item)”)
}

UILongPressGestureRecognizer

For a better control of the gestures in the UICollectionView we will implement a UILongPressGestureRecognizer.

fileprivate var longPressGesture: UILongPressGestureRecognizer!

override func viewDidLoad() {
    super.viewDidLoad()
    longPressGesture = UILongPressGestureRecognizer(target: self, action: #selector(self.handleLongGesture(gesture:)))
    reorderCollectionView.addGestureRecognizer(longPressGesture)
}


@objc func handleLongGesture(gesture: UILongPressGestureRecognizer) {
    switch(gesture.state) {
        
    case .began:
        guard let selectedIndexPath = reorderCollectionView.indexPathForItem(at: gesture.location(in: reorderCollectionView)) else {
            break
        }
        reorderCollectionView.beginInteractiveMovementForItem(at: selectedIndexPath)
    case .changed:
        reorderCollectionView.updateInteractiveMovementTargetPosition(gesture.location(in: gesture.view!))
    case .ended:
        reorderCollectionView.endInteractiveMovement()
    default:
        reorderCollectionView.cancelInteractiveMovement()
    }
}

Note that these interactive functions work for iOS 9 and above.

That’s it for this short tutorial on how to reorder cells in UICollectionView using drag & drop. Hopefully, I have helped you learn how to do this. If it did, please don’t forget to 💚 or share this post so you can help others as well. You can also subscribe below to receive more Swift tutorials like this one.

Recommended for you: [SWIFT] How to add In-App Purchases in your iOS app

Leave a Reply

Your email address will not be published. Required fields are marked *