Javascript 跨帧可拖动的鼠标偏移量无效+；可恶的

我们目前正在尝试在jQueryUI提供的拖拽表和排序表之间完成跨帧拖动。这是正常工作了。但是，当从父帧拖动到子帧时，鼠标偏移似乎已关闭--请参见此小提琴：

父项中的代码：

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

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

子框架中的代码：

var containers = $('.sortable');
containers.sortable({
    connectWith: containers,
    cursor: 'move',
    revert: true,
    cursorAt: { top: 0, left: 0 } 
});

有人能告诉我们如何修复鼠标偏移吗？

解决方案2更新 我添加了这个js函数，因为当您向iframe添加太多可拖动元素时，如果向下滚动，则拖动元素可能会与可排序元素重叠

$('.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);
}

这里是
最终解决方案2更新

这个问题似乎是一个bug，有人提出了他的解决方案（基本上是一个解决方法）：

1 我的第一个解决方案是在不更改代码的情况下，将iframe放在可拖动内容的前面，如图所示，代码：

<iframe id="my-frame" src="/VqxGf/3/show"></iframe>
<ul>
    <li class="draggable">Drag me</li>
    <li class="draggable">Drag me 2</li>
    <li class="draggable">Drag me 3</li>
</ul>

拖动我
拖动我2
拖动我3

2 另一个似乎有效的解决方案是使用style属性：ul的position absolute，其中包含draggable

s，框架中可排序的内容有一点边距顶部，可能还有一个frameborder=0。 主页：

<ul style="position:absolute">
    <li class="draggable">Drag me</li>
    <li class="draggable">Drag me 2</li>
    <li class="draggable">Drag me 3</li>
</ul>
<iframe frameborder="0" id="my-frame" src="/ATu6F/30/show"></iframe>

拖动我
拖动我2
拖动我3

iframe页面：

<ul id="sortable" style="margin-top:100px" class="sortable idle">
    <li>Sortable</li>
    <li>Sortable 2</li>
    <li>Sortable 3</li>
</ul>

<ul id="sortable2" class="sortable idle">
    <li>Sortable</li>
    <li>Sortable 2</li>
    <li>Sortable 3</li>
</ul>

可恶的
排序表2
排序表3


可恶的
排序表2
排序表3

希望这有帮助

请参阅本文开头的编辑我已经试过了。但它并不完美

我使用parent.body更改

appendTo

，并使用顶部参数100更改

cursorAt

$('#my-frame').load(function () {
$('.draggable').draggable({
    appendTo: 'parent.body',
    helper: 'clone',
    iframeFix: true,
    revert: 'invalid',
    connectToSortable: $('#my-frame').contents().find('.sortable'),
    cursorAt: { top: 100, left: 0 } 
});

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

---

感谢@JoDev，我想让您知道，我更新了该解决方案，以避免滚动时可拖动的stuf与可排序的内容重叠。当我运行此代码时，我得到以下错误：TypeError:undefined不是对象（计算'this.overflowOffset.top'）是的，这段代码给出了我在使用jquery-ui-1.11.2测试bug时提到的错误。请参阅此项目解决可拖放的问题：。但是它对sortables（）不起作用，作者似乎也没有维护这个项目。我认为解决方案可能类似，需要在

sortable.refreshPositions（）中修复jQueryUi中的某些内容解决方案优化，您可以在POST开始时检查更新。问题可能来自此项目解决了可拖放的问题：。但是它对sortables（）不起作用，作者似乎也没有维护这个项目。我认为解决方案可能类似，需要在
sortable.refreshPositions（）中修复jQueryUi中的某些内容这里有一个非常类似的问题：参见