Offset issues with jQuery Draggable into an iFrame

Question

I'm having quite a bit of trouble resolving problems with offsets related to draggable elements being dropped into a sortable area within an iFrame.

The following leaned-down example to demonstrates the problem here.

Make sure to keep your window fairly narrow, as otherwise it's very difficult to drop the elements into the iFrame at all. It should be pretty obvious that you cannot drag the item and drop it in the designated place, instead you must drag about 350 pixels to the right of the leftmost border, after which the sortable will accept the draggable.

I've tried quite a few things here already, but thus far I have been unable to narrow down the problem. I'm not even entirely sure I understand the source of the problem, just knowing that would allow me to possibly write a plugin that could correct this issue.

There have been a few people who've asked this question before, but the solutions offered are not exactly production-ready, usually simplistic workarounds. I need something more comprehensive here, something that will entirely eliminate the offset issue, and allow draggables to be received by sortables similar to how existing sortable elements are received by other sortables.

Answer 1

It's sadly not supported. See https://bugs.jqueryui.com/ticket/15047

To archive the same via HTML5 sortables you can use RubaXa's sortable. See https://github.com/RubaXa/Sortable

The JavaScript is configured like this:

$('#inner-iframe').load(function () {

var elOuter = document.getElementById('outer-draggables');
Sortable.create(elOuter, {
    group: 'sortable-group'
});

var elInner = document.getElementById('inner-iframe').contentWindow.document.getElementById('sortable');
Sortable.create(elInner, {
    group: 'sortable-group'
});

var elInner2 = document.getElementById('inner-iframe').contentWindow.document.getElementById('sortable2');
Sortable.create(elInner2, {
    group: 'sortable-group'
});

});

See http://jsfiddle.net/vdyd3nhw/3/