jquery ui, перетаскиваемый с помощью iframe, неправильная ручка положения

Question

У меня проблема с перетаскиванием jquery ui. Мне нужно перетащить элемент в iframe, который содержит внутреннюю область. Когда я перетаскиваю элемент с левой стороны и опускаю в iframe, он не работает, как я ожидал. Это выглядит как эта скрипка:

http://jsfiddle.net/8Jwxv/66/

JS

$('#my-frame').load(function () {
    $('.draggable').draggable({
        appendTo: 'body',
        helper: 'clone',
        iframeFix: true,
        revert: 'invalid',
        connectToSortable: $('#my-frame').contents().find('.sortable'),
        cursorAt: { top: 10, left: 0 }, 
        drag: function(event,ui){
            console.log(ui.offset);
        }
    });

    $('#my-frame').contents().find('.sortable').sortable({
        iframeFix: true,
        cursorAt: { top: 0, left: 0 } 
    });
});
$('.draggable').on('dragstop',autoResize);


function autoResize(){
    var newheight;
    if(document.getElementById){
        newheight=document.getElementById('my-frame').contentWindow.document .body.scrollHeight;
    }
    newheight=newheight+100;
    $('#my-frame').css('height',newheight);
}

Можете ли вы помочь мне исправить это? Спасибо

Answer 1

Хорошо, проблема в ширине вашего iframe. Можете ли вы добавить в "px" больше, чем в "%"?

Смотри эту скрипку, смещение хорошее:

http://jsfiddle.net/8Jwxv/68/

#my-frame {
    width: 500px;
    height: 300px;
    position: absolute;
    right: 0px;
}

Answer 2

У меня была та же проблема, и единственное решение, которое я нашел, здесь: http://maxazan.github.io/jquery-ui-droppable-iframe/

Просто ссылку на файл JS, и он должен работать абсолютно идеально