Offset issues with jQuery Draggable into an iFrame based Sortable -

i'm having quite bit of trouble resolving problems offsets related draggable elements being dropped sortable area within iframe.

the following leaned-down example demonstrates problem here.

make sure keep window narrow, otherwise it's difficult drop elements iframe @ all. should pretty obvious cannot drag item , drop in designated place, instead must drag 350 pixels right of leftmost border, after sortable accept draggable.

i've tried quite few things here already, far have been unable narrow down problem. i'm not entirely sure understand source of problem, knowing allow me possibly write plugin correct issue.

there have been few people who've asked question before, solutions offered not production-ready, simplistic workarounds. need more comprehensive here, entirely eliminate offset issue, , allow draggables received sortables similar how existing sortable elements received other sortables.

it's sadly not supported. see https://bugs.jqueryui.com/ticket/15047

to archive same via html5 sortables can use rubaxa's sortable. see https://github.com/rubaxa/sortable

the javascript configured 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/