jquery-ui - jQuery UI : moving items from one list to another

Question

虽然这应该相对简单，但我不知道如何移动(而不是复制)LI UL之间的元素s。

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

虽然 connectToSortable几乎完全符合我的要求(尽管我更愿意避免 sortable )，它会克隆元素 - 并通过对 stop 使用react来手动删除原始元素事实证明事件并不那么容易(例如，确保实际发生了有效的下降)。

一个简单的“hello world”示例对我有很大帮助。

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 上检查标志。警告:这个函数对用户和程序员来说都是丑陋的，但它可以工作。