jQuery draggable + sortable:奇怪的鼠标偏移行为

Question

我有可拖动的<li>元素列表,我可以将它拖到另一个空的<ul>元素中.如果我拖动可拖动原始<ul>的第一个<li>元素,一切正常......

问题:

...但是当我拖动该列表中的任何其他<li>元素时,只要我越过可接收的可排序<ul>的边界,"帮助者"就会远离鼠标指针.更准确地说,它会移动到列表的顶部.

有没有人见过这个并知道解决方案？好吧,我的问题是,我只是使用jquery,并没有真正深入到它,也从未真正使用过javascript.

有关该问题的更多信息:

我的jQuery代码:

$(document).ready(function() {
    $('#roleList > li').draggable({
        connectToSortable: '#roleDrop',
        containment: '#container',
        revert: 'invalid'
    });                   
    $('#roleDrop').sortable({
        cursor: 'move',
        containment: '#container',
        revert: true,
        update: function() {
            var order = $('#roleDrop').sortable('serialize');
            $.ajax({
                type: 'POST',
                url: '".$postUrl."',
                dataType: 'html',
                data: order
            });
        }                          
    });
    $('#roleList').disableSelection();
});

虽然#roleList和#roleDrop是前面提到的无序列表,但#container是一个表.

现在是发生了什么的屏幕截图.

我开始拖动项目:

http://drop.io/download/public/dkabw5hlq3yfm0f84yji/7bf91122adc241373a5da13b5bde4b231644c1c5/da142000-ff76-012b-41ee-f10bc9db08a6/5a1bfa70-68f6-012c-6d08-f2025930ce6a/v2/thumbnail_large

当我越过第二个<ul>的边界时,助手会跳起来.

http://drop.io/download/public/dkabw5hlq3yfm0f84yji/2fad1d633d38cf593da46c638d1930431ea5fd35/da142000-ff76-012b-41ee-f10bc9db08a6/5c65c4c0-68f6-012c-6601-f12da00d9d47/v2/thumbnail_large

如果你也需要xhtml标记,请告诉我.

Answer 1

尝试添加helper: 'clone'您的.draggable选项:

$('#roleList > li').draggable({
    helper: 'clone',
    connectToSortable: '#roleDrop',
    containment: '#container',
    revert: 'invalid'
});                   

根据jQuery文档,您应该在将draggable连接到可排序时设置此选项.

虽然这会产生不同的界面体验(拖动项目被克隆而不是移动),但至少是文档暗示的已知问题的临时解决方法.附加事件处理可以#roleList在#roleDrop更新回调期间清除原始项目.