How to drag multiple uiview on another uiview or image in a view controller in Swift 4

Question

I am working on a puzzle game where I have to drag the multiple UIviews on another UIviews or UIimages in a Viewcontroller.

Here is the link for the single uiview draggable.

In this program there is just a single UIview which is draggable, Now i want to add more UIviews to whom i can drag.

import UIKit

class GameViewController: UIViewController, UIGestureRecognizerDelegate, UITextFieldDelegate {

@IBOutlet weak var viewDrag: UIView!

var panGesture  = UIPanGestureRecognizer()

override func viewDidLoad() {
super.viewDidLoad()
panGesture = UIPanGestureRecognizer(target: self, action: #selector(GameViewController.draggedView(_:)))
viewDrag.isUserInteractionEnabled = true
viewDrag.addGestureRecognizer(panGesture)
viewDrag.backgroundColor = UIColor.green
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

@objc func draggedView(_ sender:UIPanGestureRecognizer){
self.view.bringSubview(toFront: viewDrag)
let translation = sender.translation(in: self.view)
viewDrag.center = CGPoint(x: viewDrag.center.x + translation.x, y: viewDrag.center.y + translation.y)

sender.setTranslation(CGPoint.zero, in: self.view)
 }
}

Here is the image of a white color square shape UIview which is draggable on the UIimage in viewcontroller

score 0 · Accepted Answer · answered Nov 07 '17 at 14:24

I have made a simple example for you.

In the example I have created a function which will create 5 draggable UIViews:

   /// Creates A Row Of 5 Draggable UIViews
func createDraggableViews(){

    //1. Determine The Size Of The Draggable View
    let viewSize = CGSize(width: 50, height: 50)

    //2. Create Padding Between The Views
    let padding: CGFloat = 10

    //2. Create 5 Draggable Views
    for i in 0 ..< 5{
        print((CGFloat(i) * viewSize.width) + 10)
        let draggableView = UIView(frame: CGRect(x: 10 + (CGFloat(i) * viewSize.width) + (CGFloat(i) * padding), y: 100,
                                                 width: viewSize.width, height: viewSize.height))
        draggableView.backgroundColor = .purple

        //2a. Create A Pan Gesture Recognizer So The View Can Be Moved
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(moveObject(_:)))
        draggableView.addGestureRecognizer(panGesture)

        //2b. Add The Draggable View To The Main View
        self.view.addSubview(draggableView)
    }

}

These views are then made draggable by the following code:

 /// Moves A Draggable Object Around The Screen
///
/// - Parameter gesture: UIPanGestureRecognizer
@objc func moveObject(_ gesture: UIPanGestureRecognizer){

    //1. Check That We Have A Valid Draggable View
    guard let draggedObject = gesture.view else { return }

    if gesture.state == .began || gesture.state == .changed {

        //2. Set The Translation & Move The View
        let translation = gesture.translation(in: self.view)
        draggedObject.center = CGPoint(x: draggedObject.center.x + translation.x, y: draggedObject.center.y + translation.y)
        gesture.setTranslation(CGPoint.zero, in: self.view)


    }else if gesture.state == .ended {

    }
}

This is not a full example, but hopefully it can be a good starting point for you ^______^.

How to drag multiple uiview on another uiview or image in a view controller in Swift 4

1 Answers1