How to detect target object on drag drop operation on image with zoom and scrolled canvas?

[BharatPatel1]

As on canvas there are some images added. Let say image a, b and c at different position. If Zoom in the canvas and due to overflow scroll it and after that when I try to drag drop an library image -x on the canvas image -a, then by using 'findTarget' unable to get the target image-a on canvas.

var target = canvas.findTarget(event.e);

Facing the problem with zoom + scroll combination.

Thanks for any help!

[asturur]

Please provide a jsfiddle with this setup
( 3 images, scroll e zoomed canvas )

[BharatPatel1]

Thank you Andrea,

Please refer the jsfiddle:

http://jsfiddle.net/bharatpatel/w72pxr6d/1/

[asturur]

Please let me understand better.
In this example there a picture.
When there are 2 images, and secondo image goes over the first, the first is no more selectable.
Is this the problem?
Or you are trying to do something with drag and drop from outside the canvas?

[BharatPatel1]

Yes, I have draged image from out side the canvas and drop the image on canvas image. And to replace the canvas image by the dragged image trying to detect canvas image object on drop event using mouse pointer.

[asturur]

if you can click the image it means that findTarget is working good.
can you share your dragndrop code, maybe there is some issue there.

[BharatPatel1]

Without zoom and scroll of the page operations, on the drop event findTarget working fine.

But before performing drag drop operation if we perform

1. zoom the canvas upto the image gose outoff the div or canvas visible screen.

2. scroll the page so the canvas image viewable area of the div ( let say scroll upto the canvas image near to topbar of the canvas).

3. now perform drag drop event and on drop event findTarget not working.

(Sorry dear as currently I am replying from mobile... I am not on development environment at this time. I am unable to share the reference code at this time.

[BharatPatel1]

Please refer with drag drop operation:

http://jsfiddle.net/w72pxr6d/2/

[asturur]

Look there is some strange interaction between viewportzoom and calcOffset with scrolling.
I do not know if IFRAME is the problem

Anyway in fiddle i changed just this:

function handleDragEnd(event) {
    //removed event.e
    console.log(event);
    var pointer = _canvas.getPointer(event);
    console.log(pointer);
    var targetObject = _canvas.findTarget(event);
    console.log("target object : " + targetObject )
}

https://jsfiddle.net/w72pxr6d/3/embedded/result/
if you run it in the jsfiddle space divided in 4 frames it never works

[BharatPatel1]

I was also in same impression that IFRAME is the problem. so i had tried it in single page app. However, facing the same problem.