iPhone App: implementation of Drag and drop images in UIView

Question

In my iPhone App I want to implemented functionality as shown below

user can pick a shape(an image) from one view and put in other view

How can I achieve this?

Answer 1

You can use below open source libraries:

1. Library 1 OBDragDrop
2. Library 2 AJWDraggableDroppable
3. Library 3 iOS-DragAndDrop
4. Library 4 ios-drag-and-drop

Answer 2

Easiest way is to use a UIPanGestureRecognizer. That will give you messages when the view is moved and when it is dropped. When it is moved, update its center. When it is dropped, check if its position is within the bounds of the view you want to drop in. (You might need to convert coordinates to the target view's coordinate system.) If it is, do the appropriate action.

Answer 3

You can refer to the previous post which will definitely help you to achieve this functionality...

1. Basic Drag and Drop in iOS
2. Building drag and drop interface on iphone
3. iPhone drag/drop

For all of above link, You have to keep in mind that You need to first get TouchesBegin event for any Control and then you have to get the TouchesMoved event for same control.

In TouchesMoved event, you just have to get the center point (CGPoint) of the Control. And when you release the control will be set at that CGPoint. If this creates problem then you can take that CGPoint in variable and set that Point in TouchesEnded event.

For your case, i think you must have to maintain the Hierarchy of the Views...Else while dragging you view may not be visible...

FOR MORE CODING PART :

-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

        NSLog(@"%f,%f", self.center.x, self.center.y);
        CGPoint newLoc = CGPointZero;

        newLoc = [self.mainView convertPoint:[[touches anyObject] locationInView:self.superview] toView:self.superview];
        float newX = newLoc.x + self.superview.frame.origin.x + (self.frame.size.width /2) + [[touches anyObject] locationInView:self].x ;
        float newY = newLoc.y - (((UIScrollView *)self.superview).contentOffset.y *2) ;
        NSLog(@"content offset %f", ((UIScrollView *)self.superview).contentOffset.y);

        self.scrollParent.scrollEnabled = NO;
        NSLog(@"%f,%f", self.center.x, self.center.y);

        newLoc = CGPointMake(newX, newY);
        [self.superview touchesCancelled:touches withEvent:event];                                                               
        [self removeFromSuperview];
        NSLog(@"%f,%f", self.center.x, self.center.y);


        self.center = CGPointMake(newLoc.x, newLoc.y);
        [self.mainView addSubview:self];
        NSLog(@"%f,%f", self.center.x, self.center.y);

        [self.mainView bringSubviewToFront:self];
        isInScrollview = NO;
}   

-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {

    [UIView beginAnimations:@"stalk" context:nil];
    [UIView setAnimationDuration:.001];
    [UIView setAnimationBeginsFromCurrentState:YES];

    UITouch *touch = [touches anyObject];

    self.center = [touch locationInView: self.superview];

    [UIView commitAnimations];
    if ((self.center.x + (self.frame.size.width / 2)) > 150 && hasExitedDrawer && !self.scrollParent.dragging ) {
        self.scrollParent.scrollEnabled = NO;

        [self.delegate moveItemsDownFromIndex: ((self.center.y + (self.scrollParent.contentOffset.y)) / 44) + 1 ];
        //NSLog(@"%i", ((self.center.y + (self.scrollParent.contentOffset.y *2)) / 44) + 1);
    }

    if (self.center.x + (self.frame.size.width / 2) < 150) {

        hasExitedDrawer = YES;

    }

}   

-(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {

    if ((self.center.x + (self.frame.size.width / 2)) > 150 && hasExitedDrawer && !self.scrollParent.dragging ) {
        CGPoint newLoc = CGPointZero;

        newLoc = [self.scrollParent convertPoint:[[touches anyObject] locationInView:self.superview] toView:self.superview];
        float newY = newLoc.y + (self.scrollParent.contentOffset.y *2);

        [self.scrollParent insertSubview:self atIndex:((self.center.y + (self.scrollParent.contentOffset.y)) / 44) ];
        self.frame = CGRectMake(0, newY, self.frame.size.width, self.frame.size.height);
        isInScrollview = YES;
        hasExitedDrawer = NO;
    }
}

This code may cantains some irrelevant but gives you more idea...