跨帧可拖动+可排序的无效鼠标偏移量

Question

我们目前正在尝试实现jQuery UI提供的可拖拽和可排序对象之间的跨帧拖动。现在工作正常了。但是，当从父框架拖动到子框架时，鼠标偏移量似乎消失了-请参阅此小提琴:http://jsfiddle.net/r5nfe/6/.

父代码:

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

谁能告诉我们如何修复鼠标偏移?

Answer 1

解决方案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);
}

这里是新的jsfield
结束解决方案2更新

这个问题似乎是一个bug，有人已经提出了他的解决方案(基本上是一个工作区):透明div解决方案

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

另一个似乎有效的解决方案是使用style属性:对于包含可拖动

s的ul的绝对位置，对于框架中可排序的东西的margin-top，也许，frameborder=0。jsfiddle主页面:

<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>

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>

希望对你有帮助。

请参阅本文开头的编辑

Answer 2

我已经试过了。但它并不完美。

我改变appendTo与父。body，以及top参数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 } 
});
});