5

我有 < 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-f20b5bde4b231644c1c5/da142000-ff76-012b-41ee-f10bc9db08a6/5a1bfa70-68f6-012c-6d08-f20b5bfa70-68f6-012c-6d08-f2025b5a

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

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

如果您也需要 xhtml 标记，请告诉我。

4

1 回答 1

9

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

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

根据jQuery 文档，您应该在将可拖动对象连接到可排序对象时设置此选项。

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

于 2009-08-13T03:56:53.860 回答