Drag and drop objects and return them to their original position

Question

I'm trying to drag an image and let it return to it's original position after releasing it. So far, I can drag an image by creating it as a button using the following code: (as seen in the answer to this question: Basic Drag and Drop in iOS )

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self action:@selector(imageTouch:withEvent:) forControlEvents:UIControlEventTouchDown];
[button addTarget:self action:@selector(imageMoved:withEvent:) forControlEvents:UIControlEventTouchDragInside];
[button setImage:[UIImage imageNamed:@"vehicle.png"] forState:UIControlStateNormal];
[self.view addSubview:button];

And later I define:

- (IBAction) imageMoved:(id) sender withEvent:(UIEvent *) event
{
    CGPoint point = [[[event allTouches] anyObject] locationInView:self.view];
    UIControl *control = sender;
    control.center = point;
}

How can I make it return to it's original position after releasing it ?, for starters I will save the position at which each image is supposed to return, but then, there is anyway to indicate an UIImage to go from it's current position and move to another one ?, or any other alterative solution ?

Answer 1

UIGestureRecognizer is recommended by Apple for recent iOSes. You can use it not only for UIButton, but also for UIView (especially UIImageView in your case), etc. So I would like to recommend it.

In the interface:

@interface TestDragViewController : UIViewController {
    IBOutlet UIImageView *dragImage;
    CGPoint originalCenter;
}

In viewDidLoad, plz remember to enable userInteraction:

- (void)viewDidLoad {
    [super viewDidLoad];


    UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self 
                                                                                 action:@selector(dragGesture:)];
    [dragImage addGestureRecognizer:panGesture];
    [dragImage setUserInteractionEnabled:YES];
}

And in its selector, I just set animation to visualize the returning effect:

#pragma mark -
#pragma mark UIPanGestureRecognizer selector
- (void) dragGesture:(UIPanGestureRecognizer *) panGesture{
    CGPoint translation = [panGesture translationInView:self.view];

    switch (panGesture.state) {
        case UIGestureRecognizerStateBegan:{
            originalCenter = dragImage.center;
        }
            break;
        case UIGestureRecognizerStateChanged:{
            dragImage.center = CGPointMake(dragImage.center.x + translation.x,
                                           dragImage.center.y + translation.y);
        }
            break;
        case UIGestureRecognizerStateEnded:{            
            [UIView animateWithDuration:kImageReturnTime 
                             animations:^{
                                 dragImage.center = originalCenter;
                             }
                             completion:^(BOOL finished){
                                 NSLog(@"Returned");
                             }];
        }
            break;
        default:
            break;
    }

    [panGesture setTranslation:CGPointZero inView:self.view];
}

Cheers,

Tommy