iPhone/iOS: How to implement Drag and Drop for subviews of a Scrollview?

Question

I am having an horizontal scrollview in an UIViewController, where i have many images in small sizes. I am keeping the images in scrollview because the images are more, so user can scroll horizontally and choose images. But, the problem is, i have to select an image and drag and drop to that UIViewController view. But, since the images are in scrollview, drag and drop images into UIViewcontroller's view is not working, not detecting the touch events too. Please NOTE: If i don't have scrollview but just keeping the images also into UIViewcontroller's view itself, drag and drop the images on the same screen, is working very well.

How can I resolve this when I need to have scrollview and drag and drop images, any advice/help please?

Answer 1

Hi Getsy,

I am not going to provide you code directly but give idea how to manage this.

You can manage this way, When you get touch on your object in scrollView at that time or when you move that object by draging at that time disable scroll by myScroll.scrollEnabled = NO;

Then When on endTouch you can enable Scroll by myScroll.scrollEnabled = YES; So by this you can manage you object moving in scroll hope you got logic.

Here is the demo code : Drag and Drop with ScrollView. which has same logic of Disabling scroll view on touchesMoved: and Enabling scroll view on touchesEnded:.

Answer 2

I did implement that behaviour before without any subclassing.

I used canCancelContentTouches = NO of the UIScrollView to make sure the subviews handle there touches on their own. If a subview (in your case an image) was touched, i moved the view out of the scrollview onto the superview and started tracking it's dragging. (You have to calculate the correct coordinates within the new superview, so it stays in place).

After dragging finishes, i checked if the target area was reached, otherwise I moved it back into the scrollview. If that's not detailed enough I could post some code.

Well here is my example code: Github: JDDroppableView

Answer 3

Getsy,

Try the code for drag and drop the objects :

-(void)dragAndDropWithGesture {

UILongPressGestureRecognizer *downwardGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(dragGestureChanged:)];
[scrollViewAlfabeto addGestureRecognizer:downwardGesture];
    for (UIGestureRecognizer *gestureRecognizer in myscrollView.gestureRecognizers)
    {
       [gestureRecognizer requireGestureRecognizerToFail:downwardGesture];
    }
}

- (void) dragGestureChanged:(UIPanGestureRecognizer*)gesture
{
CGPoint point = [gesture locationInView:scrollViewAlfabeto];

if (gesture.state == UIGestureRecognizerStateBegan) 
{

    [imageViewToMove removeFromSuperview];
    [self.view addSubview:imageViewToMove];

    UIView *draggedView = [myscrollView hitTest:point withEvent:nil];
    if ([draggedView isKindOfClass:[UIImageView class]])
    {
        imageViewToMove = (UIImageView*)draggedView;
    }
}
else if (gesture.state == UIGestureRecognizerStateChanged)
{
    imageToMove.center = point;
}
else if (gesture.state == UIGestureRecognizerStateEnded     ||
         gesture.state == UIGestureRecognizerStateCancelled ||
         gesture.state == UIGestureRecognizerStateFailed)
{
    // Determine if dragged view is in an OK drop zone
    // If so, then do the drop action, if not, return it to original location

    NSLog(@"point.x final:%f", point.x);
    NSLog(@"point.y final:%f", point.y);

    if (CGRectContainsPoint(goal.frame, point)){
        imageToMove.frame = CGRectMake(167, 159, 100, 100);
    }

    else{

        [imageToMove removeFromSuperview];
        [myscrollView addSubview:imageToMove];
        [imageToMove setFrame:CGRectMake(12, 38, 100, 100)];
        imageToMove = nil;



    }
}

}

May this code will help you out.