Adding drag and drop component to iOS app

Question

I apologise if this seems very vague but I'm not sure how else to word it.

I am trying to build an ipad app that will let users populate a workspace with tools they need. I need an example of letting a user drag and drop components into the app interface. So for example if i had an app that the user can make a form and I want the user to be able to drag text boxes, lists, radio buttons etc to make the form, how would i go about doing that? The items that i am using will be in a popup menu so that the user drags up and then will see all the items that i need inside that popup. Im just not sure how to let them drag from the popup to the canvas and also be able to reuse the same item (so have 3 or 4 text boxes in the example). Is this possible? Can anyone direct me to a tutorial on this? I have searched but cant find anything.

If this is laid out wrong or is a stupid quest please let me know how to do it, this is my first time posting on here.

Thank you

Answer 1

From the Question i thing you are going to Build a feature like Add to cart in Most of the Shopping Apps like Amazon, Flip kart and etc..

- (void)viewDidLoad {
    [super viewDidLoad];

    shoeImageView1 = [[UIImageView alloc]initWithFrame:CGRectMake(46,222, 51 , 51)];
    shoeImageView1.image = [UIImage imageNamed:@"shoe.png"];

    shoeImageView2 = [[UIImageView alloc]initWithFrame:CGRectMake(150,222, 51 , 51)];
    shoeImageView2.image = [UIImage imageNamed:@"shoe1.png"];

    shoeImageView3 = [[UIImageView alloc]initWithFrame:CGRectMake(225,222, 51 , 51)];
    shoeImageView3.image = [UIImage imageNamed:@"shoe2.png"];


     addTOCart = [[UIImageView alloc]initWithFrame:CGRectMake(132,400, 80, 80)];
    addTOCart.image = [UIImage imageNamed:@"basket.png"];
    [self.view addSubview:addTOCart];

    imageViewArray = [[NSMutableArray alloc]initWithObjects: shoeImageView1,shoeImageView2 ,shoeImageView3,nil];



    for (int i=0; i<imageViewArray.count; i++) {

        [self.view addSubview:[imageViewArray objectAtIndex:i]];
        [[imageViewArray objectAtIndex:i]setUserInteractionEnabled:YES];

//[self touchesBegan:imageViewArray[i] withEvent:nil];


    }


}


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
for(int i=0 ; i< imageViewArray.count; i++)
{

    CGPoint pt = [[touches anyObject]locationInView:self.view];

    startLocation = pt;



    newtemp = [imageViewArray objectAtIndex:i];

    UITouch* bTouch = [touches anyObject];

    if ([bTouch.view isEqual:newtemp])
    {
        firstTouchPoint = [bTouch locationInView:[self view]];
        oldX = firstTouchPoint.x - [[bTouch view]center].x;
        oldY = firstTouchPoint.y - [[bTouch view]center].y;
    }

}
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    for(int i=0 ; i< imageViewArray.count; i++)
    {
    newtemp = [imageViewArray objectAtIndex:i];

        //oldLoc = newtemp.frame;


    if (CGRectContainsPoint(addTOCart.frame , newtemp.frame.origin))
    {
        NSLog(@"touched");
               dragging = NO;

        UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"Cart" message:@"Added to Cart" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];

        [[imageViewArray objectAtIndex:i] setImage:[UIImage imageNamed:@""]];


        [imageViewArray removeObjectAtIndex:i];

        [alert show];


        break;

    }

    else
    {
        //[newtemp setCenter:CGPointMake(startLocation.x-oldX, startLocation.y-oldY)];
    }
       // self.view.userInteractionEnabled= NO;

    }


    dragging = NO;
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{

    UITouch* mTouch = [touches anyObject];
   // if ([mTouch.view isEqual: newtemp]) {
        CGPoint cp = [mTouch locationInView:[self view]];
        [[mTouch view]setCenter:CGPointMake(cp.x-oldX, cp.y-oldY)];


   // }
}

you can use these codes to implement these feauture. Using these code u can drag the object any where in the screen.

for sample project you can use this Link.

Answer 2

There are already many answers explaining this question. Basically you can make custom UIView, which after touching will be following the touch movement. Something like this:

-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    _originalPosition = self.view.center;
    _touchOffset = CGPointMake(self.view.center.x-position.x,self.view.center.y-position.y);
}

-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{        
    UITouch *touch = [touches anyObject];
    CGPoint position = [touch locationInView: self.view.superview];

    [UIView animateWithDuration:.001
                          delay:0.0
                        options:UIViewAnimationOptionCurveEaseInOut
                     animations:^ {

                         self.view.center = CGPointMake(position.x+_touchOffset.x, position.y+_touchOffset.y);
                     }
                     completion:^(BOOL finished) {}];
}

-(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    CGPoint positionInView = [touch locationInView:self.view];
    CGPoint newPosition;
    if (CGRectContainsPoint(_desiredView.frame, positionInView)) {
        newPosition = positionInView;
        // _desiredView is view where the user can drag the view
    } else {
        newPosition = _originalPosition;
        // its outside the desired view so lets move the view back to start position
    }

    [UIView animateWithDuration:0.4
                          delay:0.0
                        options:UIViewAnimationOptionCurveEaseInOut
                     animations:^ {
                         self.view.center = newPosition
                         // to 
                     }
                     completion:^(BOOL finished) {}];

}

Similar questions

iPhone App: implementation of Drag and drop images in UIView

Basic Drag and Drop in iOS

iPhone drag/drop