You've got the usual drag and drop use case, but you want to have your draggables in the top window, and the droppables within an iframe (located on the same domain, ofcourse!).
jQuery UI doesn't support this use case, and as such the offset of the container frame element isn't taken into account, causing issues with drop detection!
This fix requires the overriding of a core jQuery UI method, but should not be done in the main
jquery-ui.js file!. Instead, include this in a new file, and include it after the jQuery UI library script. Obviously if jQuery UI's method changes substantially, or disappears entirely, this fix won't work. But until then... happy dragging!
The fix (jQuery UI
The fix is farily straight forward, but requires overriding the
$.ui.ddmanager.prepareOffsets method, in order to take into account elements which lie within a different document. Here's the code
Note: jQuery UI
1.10.4 release changes the way the
proportions attribute is used, repalcing the regular object syntax with a helper callback method. You can view the updated syntax here.
In order for the droppable offets to be calculated correctly, the offset of the containing frame must be taken into account, by adding it to the calculated droppables
left offsets. This ensures the offset is correct in relation to the parent document.
Important note: The
$.ui.ddmanager.frameOffsets object caches the
<iframe> offset in
.prepareOffsets(). If this changes regularly, you may need to prevent caching this and instead re-evaluate the
.offset() call on the
frameElement each time the
.prepareOffsets() method is run.