Drag UILabel from point A to point B

Question

How can I go about dragging a UILabel from point A to point B on my iPhone application?

Answer 1

Basically, you would need to build the functionality yourself. You could do this by listening to touches in a superview that includes the full draggable area. The method hitTest:withEvent: can tell you if the touch down point is in the label to be dragged.

From there, you can override the touchesMoved:withEvent: method to update the position of the UILabel to keep it aligned with the finger. Updating the position of the label will automatically redraw it for you.

Here's a relevant question for iphone drag/drop.

Once you get the dragging working, I would also recommend paying attention to the location within the UILabel where the first touch was made, and handle the repositioning in such a way that the finger is always on that point within the UILabel. An easier-to-code but worse-looking version is to simply reposition, say, the upper-left corner of the label to be where the finger is, but this could make the label appear to jump when it first starts dragging.

It may sound intimidating, but it's really not that bad -- just a few lines of code in total. Unless you have views that might overlap. That's another few lines, depending on how you want to handle it.

Answer 2

// MARK: - Touch Functions

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {

    guard let location = touches.first?.preciseLocationInView(quoteView) else { return }

    if quoteView.pointInside(location, withEvent: event) {
        locationInView = location.y
        isInButton = true
    } else {
        isInButton = false
    }
}

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

    if isInButton {

        guard let totalYMovement = touches.first?.preciseLocationInView(self.view).y,
        locationInView = self.locationInView else { return }

        var yMovement = totalYMovement - quoteViewLocation
        if locationInView >= (self.quoteView.frame.height / 2) {
            // Works!
            yMovement = yMovement - (locationInView - (self.quoteView.frame.height / 2))
        } else {
            yMovement = yMovement + ((self.quoteView.frame.height / 2) - locationInView)
        }

        self.quoteView.transform.ty = yMovement
    }
}

I used the above code to translate a view along the y axis. The quoteViewLocation variable is a gettable CGPoint which returns

self.view.frame.height / 2

locationInView is a optional CGPoint that is set every time a tap is made inside of the view to be transformed is tapped.

You can place the button anywhere in your view using my code, just make sure your quoteViewLocation (Whatever you are going to call it) variable returns the CGPoint.y horizontally bisecting the view. This point must be the corresponding point of the superview. What I mean by this is if you have a child view with a height of 40 points and a super view with a height of 40 points and the child view is centered smack dab in the middle of the super view you may think the correct CGPoint to return is 20. Nope! While this is the correct center Y of the child view the center of the super view is 200. Return the CGPoint of the superview.

You have to do this to keep the transformation smooth.

If you want to move a view along the x axis it's the same idea.

If I missed anything or misspoke tear into me. Trying to learn here too.

Thanks