Question

我遇到了jquery ui拖放问题。我需要将元素拖到包含可放置区域的iframe中。当我在左侧拖动项目并放到iframe时，它没有像我预期的那样工作。这看起来就像这个小提琴：

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文件，它就可以绝对完美地工作

jquery ui draggable with iframe错误的droppable position handle

2 个答案: