drag and drop uiimage into another uiimageview

Question

I am using following code snippet to drag and drop uiimageview

UIPanGestureRecognizer *panRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(move:)];
[panRecognizer setMinimumNumberOfTouches:1];
[panRecognizer setMaximumNumberOfTouches:1];
[panRecognizer setDelegate:self];
[myImageView addGestureRecognizer:panRecognizer];

-(void)move:(id)sender {

    CGPoint translatedPoint = [(UIPanGestureRecognizer*)sender translationInView:self.view];

    if([(UIPanGestureRecognizer*)sender state] == UIGestureRecognizerStateBegan) {

        firstX = [myImageView  center].x;
        firstY = [myImageView  center].y;
    }

    translatedPoint = CGPointMake(firstX+translatedPoint.x, firstY+translatedPoint.y);
    [myImageView  setCenter:translatedPoint];

}

This code is drags the whole myImageView ,but my requirement is to just drag the uiimage and drop it into another uiimagview.myImageView should stay as it is after dragging also.just I need to drag the myImageView layer.draggable image should be transparent. Any ideas would b appreciated.

Answer 1

I have put little effort to achieve your output. try it

Step 1 :Define this 3 Variables in your .h file

UIImageView *ivSource1, *ivDestination2, *tempIV;

Step 2 : Initialize all the three UIImageView and add to your ViewController write it in viewDidLoad method

ivSource1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.jpg"]];
[ivSource1 setFrame:CGRectMake(100, 100, 100, 100)];
[ivSource1 setTag:100];
[ivSource1 setUserInteractionEnabled:YES];    
[self.view addSubview:ivSource1];

ivDestination2 = [[UIImageView alloc] init];
[ivDestination2 setFrame:CGRectMake(200, 300, 100, 100)];
[ivDestination2 setTag:101];
[ivDestination2 setUserInteractionEnabled:YES];
[self.view addSubview:ivDestination2];

tempIV = [[UIImageView alloc] init];
[tempIV setFrame:CGRectMake(0, 300, 100, 100)];
[tempIV setTag:102];
[tempIV setUserInteractionEnabled:YES];
[self.view addSubview:tempIV];

Step 3 : Define following touch methods to handle movement of image for Drag & Drop

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];

    if([[touch view] tag] == 100)
    {
        [tempIV setImage:ivSource1.image];
        [tempIV setCenter:[touch locationInView:self.view]];
    }
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];

    [tempIV setCenter:[touch locationInView:self.view]];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    [tempIV setCenter:[touch locationInView:self.view]];

    if(CGRectContainsPoint(ivDestination2.frame, [touch locationInView:self.view]))
    {
        [ivDestination2 setImage:tempIV.image];
    }
    // Remove image from dragable view
    [tempIV setImage:[UIImage imageNamed:@""]];    
}

Answer 2

With iOS 13, you can use Drag & Drop and copy/paste APIs in order to perform a drag and drop operation of a UIImage from one UIImageView to another UIImageView. According to your needs, you may choose one of the two following Swift 5.1 implementations.

---

#1. Using UIDragInteraction, UIDragInteractionDelegate and UIPasteConfiguration

import UIKit

class ViewController: UIViewController {

    let imageView1 = UIImageView()
    let imageView2 = UIImageView()

    override func viewDidLoad() {
        super.viewDidLoad()

        imageView1.image = UIImage(named: "image")
        imageView1.contentMode = .scaleAspectFit
        imageView1.isUserInteractionEnabled = true
        let dragInteraction = UIDragInteraction(delegate: self)
        dragInteraction.isEnabled = true
        imageView1.addInteraction(dragInteraction)

        imageView2.contentMode = .scaleAspectFit
        imageView2.isUserInteractionEnabled = true
        let configuration = UIPasteConfiguration(forAccepting: UIImage.self)
        imageView2.pasteConfiguration = configuration

        let stackView = UIStackView(arrangedSubviews: [imageView1, imageView2])
        view.addSubview(stackView)
        stackView.distribution = .fillEqually
        stackView.frame = view.bounds
        stackView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    }

    override func paste(itemProviders: [NSItemProvider]) {
        _ = itemProviders.first?.loadObject(ofClass: UIImage.self, completionHandler: { (image: NSItemProviderReading?, error: Error?) in
            DispatchQueue.main.async {
                self.imageView2.image = image as? UIImage
            }
        })
    }

}

extension ViewController: UIDragInteractionDelegate {

    func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] {
        guard let image = imageView1.image else { return [] }
        let item = UIDragItem(itemProvider: NSItemProvider(object: image))
        return [item]
    }

}

---

#2. Using UIDragInteraction, UIDragInteractionDelegate, UIDropInteraction and UIDropInteractionDelegate

import UIKit

class ViewController: UIViewController {

    let imageView1 = UIImageView()
    let imageView2 = UIImageView()

    override func viewDidLoad() {
        super.viewDidLoad()

        imageView1.image = UIImage(named: "image")
        imageView1.contentMode = .scaleAspectFit
        imageView1.isUserInteractionEnabled = true

        imageView2.contentMode = .scaleAspectFit
        imageView2.isUserInteractionEnabled = true

        let dragInteraction = UIDragInteraction(delegate: self)
        dragInteraction.isEnabled = true
        imageView1.addInteraction(dragInteraction)

        let dropInteraction = UIDropInteraction(delegate: self)
        imageView2.addInteraction(dropInteraction)

        let stackView = UIStackView(arrangedSubviews: [imageView1, imageView2])
        view.addSubview(stackView)
        stackView.distribution = .fillEqually
        stackView.frame = view.bounds
        stackView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    }

}

extension ViewController: UIDragInteractionDelegate {

    func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] {
        guard let image = imageView1.image else { return [] }
        let item = UIDragItem(itemProvider: NSItemProvider(object: image))
        item.localObject = image
        return [item]
    }

}

extension ViewController: UIDropInteractionDelegate {

    func dropInteraction(_ interaction: UIDropInteraction, canHandle session: UIDropSession) -> Bool {
        return session.canLoadObjects(ofClass: UIImage.self) && session.items.count == 1
    }

    func dropInteraction(_ interaction: UIDropInteraction, sessionDidUpdate session: UIDropSession) -> UIDropProposal {
        let dropLocation = session.location(in: view)
        let operation: UIDropOperation
        if imageView2.frame.contains(dropLocation) {
            operation = session.localDragSession == nil ? .copy : .move
        } else {
            operation = .cancel
        }

        return UIDropProposal(operation: operation)
    }

    func dropInteraction(_ interaction: UIDropInteraction, performDrop session: UIDropSession) {
        session.loadObjects(ofClass: UIImage.self) { imageItems in
            guard let images = imageItems as? [UIImage] else { return }
            self.imageView2.image = images.first
        }
    }

}