Question

I need to implement drag and drop functionalities in a web application between elements present in a web page, and elements inside an iframe (before you start complaining about iframes, I NEED it for technical reasons, it’s not an option).

I have elements in the page that can be dragged into target droppable elements inside an iframe.

I’ve managed to do it with both jQuery UI and YUI, though both libraries present the same problem: the target element (droppable target) coordinates are misinterpreted, the drop area considered by both libraries is wrong and does not represent the actual droppable object, hence the collisions between the dragged object and the dropped element are messed up entirely. It’s like the library sees the droppable element positioned in another place from where it effectively is.

I think this is due to the iframe not being positioned on top-left of page, but in the middle. I think this because I’ve read many people complaining about this issue and the problem went off if the iframe was top-left positioned. Someone suggest that the coordinates of the droppable element may be calculated based on screenX and screenY, instead of clientX and clientY, and this may be the cause of the issue, not taking into consideration the elements are inside an iframe, and so the coordinates differ between other elements outside the iframe.

So, since it seems there’s no way to fix this directly using the library functionalities, and I really don’t have time to try every library avaiable out there, I’m thinking about fixing the issue by modifying (patching) the internal functions of the library in question.

The questions are:

1) Did someone experience this behavior before, and managed to fix the issue? Or, is there a library which is able to do this flawlessly?

2) Is there some way to fix this issue using the methods and functionalities of the library itself? And if not,

3) Does somebody know which part of the library calculates the droppable area coordinates, so that I can fix it as a last extreme option?

Thanks in advance, even the smallest help will be appreciated!

---

EDIT

This fiddle demonstrate the problem. Try to move the green square inside the red square (which is inside an iframe). You will notice the collision between the two squares is wrong.

http://jsfiddle.net/DQdZ9/23/

Answer 1

This is not a “silver bullet” , but I’ll go ahead and post this as an answer, but I’m not sure how much value it will have for you. I tracked down a key function in jQuery UI that might be what you’re looking for. It’s in $.ui.ddmanager (the drag and drop manager), and the function is prepareOffsets. This line:

m[i].offset = m[i].element.offset();

seems to be the one that is setting up the offset for use when the element is actually dropped. This might be a place to fiddle with to adjust the resulting offset based on whether the droppable element is a child of the iframe.

There is another function above it $.ui.intersect that performs the logic to see if the draggable and droppable are intersecting each other.

I’m in the latest release of jQuery UI, and the file is jquery-ui-1.8.14.custom.js on line 2012-2029. If you get the single droppable file itself, jquery.ui.droppable.js, it’s on lines 203-220. And these are the dev files, not the min files.