iOS - Longpress drag and drop using UICollectionView with Animation

We’ve seen a feature in our iOS devices home screen on long press to remove an app and drag and drop any of the app. So, I have written this blog to show how we can create this feature in our app while development.

I have used UICollectionView DataSources and Delegates to implement this functionality with a shaking animation.

Here is my view that looks like with few sets of images in a UICollectionView:

1. UILongPressGestureRecognizer

Add UILongPressGestureRecognizer on UICollectionView in viewDidLoad:

//adding longpress gesture over UICollectionView
longPressGesture = UILongPressGestureRecognizer(target: self, action: #selector(self.longTap(_:)))
imgcollection.addGestureRecognizer(longPressGesture)

//adding longpress gesture over UICollectionView

longPressGesture = UILongPressGestureRecognizer(target: self, action: #selector(self.longTap(_:)))

imgcollection.addGestureRecognizer(longPressGesture)

UILongPressGestureRecognizer action func definition as given below:

Different states of Long press is given below:

beginInteractiveMovementForItem(at indexPath: IndexPath) -> It helps to know the interactive movement of the cell at particular index path.
updateInteractiveMovementTargetPosition(_:) -> It helps to update the item position in the collection view with the help of gesture position.
endInteractiveMovement()-> It helps to know that the interactive movement is ended and long press gesture has been released.
cancelInteractiveMovement()-> It helps to know the interactive movement has ended.

@objc func longTap(_ gesture: UIGestureRecognizer){
        
        switch(gesture.state) {
        case .began:
            guard let selectedIndexPath = imgcollection.indexPathForItem(at: gesture.location(in: imgcollection)) else {
                return
            }
            imgcollection.beginInteractiveMovementForItem(at: selectedIndexPath)
        case .changed:
            imgcollection.updateInteractiveMovementTargetPosition(gesture.location(in: gesture.view!))
        case .ended:
            imgcollection.endInteractiveMovement()
            doneBtn.isHidden = false
            longPressedEnabled = true
            self.imgcollection.reloadData()
        default:
            imgcollection.cancelInteractiveMovement()
        }
    }

@objc func longTap(_ gesture: UIGestureRecognizer){

switch(gesture.state) {

case .began:

guard let selectedIndexPath = imgcollection.indexPathForItem(at: gesture.location(in: imgcollection)) else {

return

}

imgcollection.beginInteractiveMovementForItem(at: selectedIndexPath)

case .changed:

imgcollection.updateInteractiveMovementTargetPosition(gesture.location(in: gesture.view!))

case .ended:

imgcollection.endInteractiveMovement()

doneBtn.isHidden = false

longPressedEnabled = true

self.imgcollection.reloadData()

default:

imgcollection.cancelInteractiveMovement()

}

2. UICollectionView Delegates and DataSources :

imgArr is an array of [String] type. The array consists of a set of sample images.

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imgArr.count
    }

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

return imgArr.count

}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: SmallImgCell.identifier, for: indexPath) as! SmallImgCell
        cell.backgroundColor = UIColor.clear
        
        cell.imgView.image = UIImage(named: "\(imgArr[indexPath.row])")
        
        cell.removeBtn.addTarget(self, action: #selector(removeBtnClick(_:)), for: .touchUpInside)
        
        if longPressedEnabled   {
            cell.startAnimate()
        }else{
            cell.stopAnimate()
        }
        
        return cell
    }

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: SmallImgCell.identifier, for: indexPath) as! SmallImgCell

cell.backgroundColor = UIColor.clear

cell.imgView.image = UIImage(named: "\(imgArr[indexPath.row])")

cell.removeBtn.addTarget(self, action: #selector(removeBtnClick(_:)), for: .touchUpInside)

if longPressedEnabled {

cell.startAnimate()

}else{

cell.stopAnimate()

}

return cell

}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: UIScreen.main.bounds.size.width/4 - 20, height: UIScreen.main.bounds.size.width/4 - 20)
    }

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

return CGSize(width: UIScreen.main.bounds.size.width/4 - 20, height: UIScreen.main.bounds.size.width/4 - 20)

}

3. SmallImgCell : UICollectionViewCell :

UICollectionViewCell consisting of an image view and a remove button.

The UIImageView is for displaying an image over the UICollectionView and UIButton for showing the cross button over the cell for deleting an item from collection view.

@IBOutlet weak var imgView: UIImageView!
@IBOutlet weak var removeBtn: UIButton!

var isAnimate: Bool! = true

@IBOutlet weak var imgView: UIImageView!

@IBOutlet weak var removeBtn: UIButton!

var isAnimate: Bool! = true

startAnimate snippet for animation over image in collection view:

The func will start toggling of the images.

//Animation of image
func startAnimate() {
        let shakeAnimation = CABasicAnimation(keyPath: "transform.rotation")
        shakeAnimation.duration = 0.05
        shakeAnimation.repeatCount = 4
        shakeAnimation.autoreverses = true
        shakeAnimation.duration = 0.2
        shakeAnimation.repeatCount = 99999
        
        let startAngle: Float = (-2) * 3.14159/180
        let stopAngle = -startAngle
        
        shakeAnimation.fromValue = NSNumber(value: startAngle as Float)
        shakeAnimation.toValue = NSNumber(value: 3 * stopAngle as Float)
        shakeAnimation.autoreverses = true
        shakeAnimation.timeOffset = 290 * drand48()
        
        let layer: CALayer = self.layer
        layer.add(shakeAnimation, forKey:"animate")
        removeBtn.isHidden = false
        isAnimate = true
    }

//Animation of image

func startAnimate() {

let shakeAnimation = CABasicAnimation(keyPath: "transform.rotation")

shakeAnimation.duration = 0.05

shakeAnimation.repeatCount = 4

shakeAnimation.autoreverses = true

shakeAnimation.duration = 0.2

shakeAnimation.repeatCount = 99999

let startAngle: Float = (-2) * 3.14159/180

let stopAngle = -startAngle

shakeAnimation.fromValue = NSNumber(value: startAngle as Float)

shakeAnimation.toValue = NSNumber(value: 3 * stopAngle as Float)

shakeAnimation.autoreverses = true

shakeAnimation.timeOffset = 290 * drand48()

let layer: CALayer = self.layer

layer.add(shakeAnimation, forKey:"animate")

removeBtn.isHidden = false

isAnimate = true

}

stopAnimate snippet for animation over image in collection view:

The func will stop toggling of images.

func stopAnimate() {
        let layer: CALayer = self.layer
        layer.removeAnimation(forKey: "animate")
        self.removeBtn.isHidden = true
        isAnimate = false
    }

func stopAnimate() {

let layer: CALayer = self.layer

layer.removeAnimation(forKey: "animate")

self.removeBtn.isHidden = true

isAnimate = false

}

Remove Button and done button is shown like in iPhone X :

On clicking Remove button action remove the item at that index from UICollectionView and reload it.

On Done button action hide the done button, stop the animation.

@IBAction func removeBtnClick(_ sender: UIButton)   {
        let hitPoint = sender.convert(CGPoint.zero, to: self.imgcollection)
        let hitIndex = self.imgcollection.indexPathForItem(at: hitPoint)
        
        //remove the image and refresh the collection view
        self.imgArr.remove(at: (hitIndex?.row)!)
        self.imgcollection.reloadData()
    }
    
    @IBAction func doneBtnClick(_ sender: UIButton) {
        //disable the shake and hide done button
        doneBtn.isHidden = true
        longPressedEnabled = false
        
        self.imgcollection.reloadData()
    }

@IBAction func removeBtnClick(_ sender: UIButton) {

let hitPoint = sender.convert(CGPoint.zero, to: self.imgcollection)

let hitIndex = self.imgcollection.indexPathForItem(at: hitPoint)

//remove the image and refresh the collection view

self.imgArr.remove(at: (hitIndex?.row)!)

self.imgcollection.reloadData()

}

@IBAction func doneBtnClick(_ sender: UIButton) {

//disable the shake and hide done button

doneBtn.isHidden = true

longPressedEnabled = false

self.imgcollection.reloadData()

}

For changing the cell locations from one place to another or dragging the cells write following snippets:

4. UICollectionView Delegates use to drag and drop from target to destination :

func collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath) -> Bool

–> Return true for enabling the drag feature.

–>

func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath)

–> Swap item from source to destination

func collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath) -> Bool {
        return true
}
    
func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
        print("Start index :- \(sourceIndexPath.item)")
        print("End index :- \(destinationIndexPath.item)")
        
        let tmp = imgArr[sourceIndexPath.item]
        imgArr[sourceIndexPath.item] = imgArr[destinationIndexPath.item]
        imgArr[destinationIndexPath.item] = tmp
        
        imgcollection.reloadData()
 }

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

return true

}

func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {

print("Start index :- \(sourceIndexPath.item)")

print("End index :- \(destinationIndexPath.item)")

let tmp = imgArr[sourceIndexPath.item]

imgArr[sourceIndexPath.item] = imgArr[destinationIndexPath.item]

imgArr[destinationIndexPath.item] = tmp

imgcollection.reloadData()

}

I hope from this, it will make you more comfortable using a LongPress and drag and drop feature of UICollectionView. Thanks for tuning in once again!

himanshu jindal

26 Oct, 2021
Updated by - Kushal Varshney
27 Jun, 2018
Updated by - himanshu jindal

. . .

6 comments

Sharafat khan 5 years ago

In Above example, only the source and destination items are replacing there positions, But in animation all the items are changing there positions, so to achieve that effect below is the code

func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
print(“Start index :- \(sourceIndexPath.item)”)
print(“End index :- \(destinationIndexPath.item)”)

let tmp = imgArr[sourceIndexPath.item]

if sourceIndexPath.item <= destinationIndexPath.item {
var index = sourceIndexPath.item
while (index destinationIndexPath.item) {
imgArr[index] = imgArr[index – 1]
index -= 1
}
imgArr[destinationIndexPath.item] = tmp
}
collectionView.reloadData()
}

Nam 5 years ago

give me source code. tks u!

Jeff 3 years ago
did he send you the source code?

Reply

Jeff 3 years ago

Could you share your GitHub of this article – it would be very useful. Thanks!

anchit (Moderator) 3 years ago
The article is self explanatory.
We don’t share the code.

You can ask your queries and we will try to help you out.

Reply

Jeff Salvant 3 years ago

Hi could you send the source code (maybe through github)?

iOS – Longpress drag and drop using UICollectionView with Animation

1. UILongPressGestureRecognizer

2. UICollectionView Delegates and DataSources :

3. SmallImgCell : UICollectionViewCell :

4. UICollectionView Delegates use to drag and drop from target to destination :

func collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath) -> Bool

func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath)

Leave a Comment Cancel Reply

6 comments

iOS – Longpress drag and drop using UICollectionView with Animation

1. UILongPressGestureRecognizer

2. UICollectionView Delegates and DataSources :

3. SmallImgCell : UICollectionViewCell :

4. UICollectionView Delegates use to drag and drop from target to destination :

func collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath) -> Bool

func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath)

Leave a Comment Cancel Reply

6 comments

Message Sent!