跨框架可拖动+可排序的鼠标偏移无效 [英] Invalid mouse offset for cross-frame draggable + sortable

问题描述

我们目前正在尝试在jQuery UI提供的draggables和sortables之间实现跨框架拖动。这现在正常工作。但是，当从父框架拖动到子框架时，鼠标偏移似乎关闭 - 请看这个小提琴： http：/ /jsfiddle.net/r5nfe/6/ 。

We are currently trying to accomplish cross-frame dragging between draggables and sortables provided by jQuery UI. This is working properly now. However, the mouse offset seems off when dragging from the parent to the child frame--please see this fiddle: 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 } 
});

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

Can someone please tell us how to fix the mouse offset?

推荐答案

解决方案2更新

我添加了这个js函数，因为当你添加iframe中有太多可拖动的元素，如果向下滚动，拖动元素可以与可排序元素重叠

solution 2 update

I added this js function because when you add too many draggable element to the iframe, the drag elements can be overlapped by the sortable elements if you scroll down

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

这里新jsfiddle

最终解决方案2更新

这问题似乎是一个错误，有人已经提出了他的解决方案（基本上是一种解决方法）： trasparent div解决方案

This problem appear to be a bug and someone have made his solution ( basically a workaround): trasparent div solution

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属性：ul的位置绝对值，其中包含可拖动的

s，框架中可排序内容的一些margin-top，也许是frameborder = 0。 jsfiddle
主页：

2 Another solution that seems to work is to play with the style property: position absolute for the ul in which contain the draggable

s, a bit of margin-top for the sortable stuff in the frame and, maybe, a frameborder=0. jsfiddle The main page:

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

希望这会有所帮助。

这篇关于跨框架可拖动+可排序的鼠标偏移无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！