Question

我有＆lt;的可拖动列表li>我能够拖入另一个空的＆lt; ul＆gt;元件。如果我拖第一个＆lt; li>可拖动原件的元素＆lt; ul＆gt;一切正常......

问题：

...但是当我拖动任何其他＆lt; li>当我越过可接收的可排序的边界时，该列表的元素“帮助者”离开鼠标指针。 ul＆gt;。更准确地说，它会移动到列表的顶部。

有没有人见过这个并知道解决方案？好吧，我的问题是，我只是使用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

当我越过第二个＆lt; ul＆gt;帮手跳了起来。

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

根据the jQuery documentation，您应该在将draggable连接到可排序时设置此选项。

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

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

1 个答案: