Question

I am trying to create a control where a user can touch and move a button within a frame. Here is my code.

- (void)wasDragged:(UIButton *)button withEvent:(UIEvent *)event
{

   UITouch *touch = [[event touchesForView:button] anyObject];

    // get delta
    CGPoint previousLocation = [touch previousLocationInView:button];
    CGPoint location = [touch locationInView:button];
    CGFloat delta_x = location.x - previousLocation.x;
    CGFloat delta_y = location.y - previousLocation.y;

    // move button
    button.center = CGPointMake(button.center.x + delta_x,
                                button.center.y + delta_y);   


}

I am able to move the button(by touching and dragging), but how to restrict the button, so that it can move only left/right within a rectangle frame.

Answer 1

Perhaps this method will help you. I used it in a simple pong game I made a while ago. It is for a UIView that is the bounce pad for the pong game. I have restricted the movement of the bounce pad to the x-direction and not outside of the screen bounds.

If something ain’t clear write a comment and I’ll try to explain.

// Method for movement of the bouncing pad. Restricted movement to x-axis inside of bounds.
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {

    UITouch *aTouch = [touches anyObject];
    CGPoint loc = [aTouch locationInView:self];
    CGPoint prevloc = [aTouch previousLocationInView:self];

    CGRect myFrame = self.frame;

    // Checking how far we have moved from the previous location
    float deltaX = loc.x - prevloc.x;

    // Note that we only update the x-position of the pad to prevent it from moving in the y-direction.
    myFrame.origin.x += deltaX;

    // Making sure that the bouncePad cannot move outside of the screen
    if(myFrame.origin.x < 0){
        myFrame.origin.x = 0;
    } else if (myFrame.origin.x + myFrame.size.width > [UIScreen main Screen].bounds.size.width) {
        myFrame.origin.x = [UIScreen mainScreen].bounds.size.width - myFrame.size.width;
    }

    // Setting the bouncing pad frame to the one with the updated position from the touches moved event.
    [self setFrame:myFrame];

}