jQuery UI:将项目从一个列表移动到另一个列表

Question

虽然这应该相对简单,但我无法弄清楚如何LI在ULs 之间移动(而不是复制)元素.

我想要的是将任何项目从列表foo拖到列表栏(反之亦然)而不复制元素.

虽然connectToSortable几乎完全符合我的要求(虽然我宁愿避免sortable),但它克隆了元素 - 并通过对stop事件做出反应手动删除原始元素结果并不那么容易(例如确保实际发生了有效的丢弃) .

一个简单的"你好世界"的例子对我有很大帮助.

Answer 1

可以在此处找到Hello World示例:http://jqueryui.com/demos/sortable/#connect-lists.你根本不需要一个draggable,只需一个sortable.

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable'
    }).disableSelection();
});

如果您想禁止在一个列表中对项目进行排序,这可能是一种方法.虽然它不是最漂亮的UI(用户被给予了错误的希望),并且用户也可以自由地确定外部列表中的放置位置.

$(function() {
    var sender;
    var recvok = false;
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable',
        start: function() {
            sender = $(this);
            recvok = false;
        },
        over: function() {
            recvok = ($(this).not(sender).length != 0);
        },
        stop: function() {
            if (!recvok)
                $(this).sortable('cancel');
        }
    }).disableSelection();
});

这是一个非常可怕的功能,解决了我认为jQuery UI中的不完整性.它将发送者保存在sortstart上并取下允许丢弃的标志.当输入另一个接收器时,它会检查它是否不是发送者并将标志置于其中.在sortstop上,检查标志.警告:这个功能对于用户和程序员来说都是丑陋的,但它确实有效.