How to drag images

Question

I can move a single UIView using the code below but how do I move multiple UIView's individually using IBOutletCollection and tag values?

class TeamSelection: UIViewController {

    var location = CGPoint(x: 0, y: 0)

    @IBOutlet weak var ViewTest: UIView! // move a single image
    @IBOutlet var Player: [UIView]! // collection to enable different images with only one outlet

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

        let touch: UITouch = touches.first! as UITouch
        location = touch.location(in: self.view)
        ViewTest.center = location

    }

}

score 0 · Answer 1 · answered Feb 03 '17 at 18:01

I'd create a subclass of UIView which supports dragging. Something like:

class DraggableView: UIView {

            func setDragGesture() {
                let panRecognizer = UIPanGestureRecognizer(target: self, action: #selector(DraggableView.handlePanGesture(_:)))
                addGestureRecognizer(panRecognizer)
            }

        func handlePanGesture(_ recognizer: UIPanGestureRecognizer) {
            guard let parentView = self.superview else { return }

            let translation = recognizer.translation(in: parentView)
            recognizer.view?.center = CGPoint(x: recognizer.view!.center.x + translation.x, y: recognizer.view!.center.y + translation.y)
            recognizer.setTranslation(CGPoint.zero, in: self)
        }


          func getLocation() -> CGPoint {
            return UIView().convert(center, to: self.superview)
        }
    }

So then you can add an array of draggable views and then ask for the location when you need to finish displaying that view controller.

Make sure isUserInteractionEnabled is set to true on the DraggableView (ie if it's an imageView) and it's superviews. — Ever Uribe, Aug 27 '19 at 23:17

Rob · Accepted Answer · 2017-02-03T20:15:17.887

There are two basic approaches:

You could iterate through your subviews figuring out in which one the touch intersected and move it. But this approach (nor the use of cryptic tag numeric values to identify the view) is generally not the preferred method.

Personally, I'd put the drag logic in the subview itself:

class CustomView: UIView {      // or subclass `UIImageView`, as needed

    private var originalCenter: CGPoint?
    private var dragStart: CGPoint?

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        originalCenter = center
        dragStart = touches.first!.location(in: superview)
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let touch = touches.first else { return }
        var location = touch.location(in: superview)
        if let predicted = event?.predictedTouches(for: touch)?.last {
            location = predicted.location(in: superview)
        }
        center = dragStart! + location - originalCenter!
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let touch = touches.first else { return }
        let location = touch.location(in: superview)
        center = dragStart! + location - originalCenter!
    }
}

extension CGPoint {
    static func +(lhs: CGPoint, rhs: CGPoint) -> CGPoint {
        return CGPoint(x: lhs.x + rhs.x, y: lhs.y + rhs.y)
    }
    static func -(lhs: CGPoint, rhs: CGPoint) -> CGPoint {
        return CGPoint(x: lhs.x - rhs.x, y: lhs.y - rhs.y)
    }
}

Remember to set "user interaction enabled" for the subviews if you use this approach.

By the way, if you're dragging views like this, make sure you don't have constraints on those views or else when the auto-layout engine next applies itself, everything will move back to the original location. If using auto-layout, you'd generally modify the constant of the constraint.

A couple of observations on that dragging logic:

You might want to use predictive touches, like above, to reduce lagginess of the drag.
Rather than moving the center to the location(in:) of the touch, I would rather keep track of by how much I dragged it and either move the center accordingly or apply a corresponding translation. It's a nicer UX, IMHO, because if you grab the the corner, it lets you drag by the corner rather than having it jump the center of the view to where the touch was on screen.

Thanks, how would I use @IBOutlet var Player: [UIView]! within the functions to move a image — Chet, Feb 05 '17 at 17:10
@Chet - The fact that you have outlet is irrelevant. The question is how you instantiated these views. For example, if in IB, then make sure to specify the base class for those player views to be the custom class shown above. But all of the `@IBOutlet` stuff is unchanged — Rob, Feb 05 '17 at 17:14

How to drag images

2 Answers2