Question

我有两个可排序的无序列表和一个垃圾桶。用户从list1中获取项目并将其放入list2中。他们还可以通过将它们拖放到垃圾桶div上来从列表2中删除项目。所有这一切都很好，但现在我想将删除的（＆＃34;删除＆＃34;）列表项添加回list1。

我使用的是ASP.NET，因此ul控件正在后面的代码中获取列表项。

感谢任何帮助。

$('#<%= list1.ClientID %>, #<%= list2.ClientID %>').sortable({
        stop: function (event, ui) {
            storeAndUpdateGroupItems();
        },
        connectWith: ".connectedSortable, #trashCan"
    }).disableSelection();

    $('#trashCan').droppable({
        accept: '#<%= list2.ClientID %> li',
        tolerance: 'pointer',
        drop: function (event, ui) {
            $('#<%= list1.ClientID %>').append(ui.draggable); //problem...
            ui.draggable.remove();
            storeAndUpdateGroupItems();
        }
    });

如果我将ui.draggable.html（）添加到.append（）方法中，html会被添加回list1，但我试图将实际可拖动的可排序的li添加回list1。

和HTML

<td>
        <div class="availableCoins">
            <ul id="_ulAllItems" runat="server" class="connectedSortable">
            </ul>
        </div>
    </td>
    <td>
        <div class="selectedCoins">
            <ul id="_ul" runat="server" class="connectedSortable">
            </ul>
        </div>
    </td>
    <td class="removeItem">
        <div id="trashCan">
    </td>

编辑好的，我的工作正常。我觉得它有点＆＃34; hacky。＆＃34;我刚刚使用ui.draggable.html（）重建了li。它有效，并且在将项目添加回list1后，它可以拖动并可排序。感谢您的建议。

$('#trashCan').droppable({
    accept: '#<%= list2.ClientID %> li',
    tolerance: 'pointer',
    drop: function (event, ui) {
        $('#<%= list1.ClientID %>').append("<li class='dragItem'>" + ui.draggable.html() + "</li>");
        ui.draggable.remove();
        storeAndUpdateGroupItems();
    }
});

Answer 1

您可以使用sortable（“refresh”）方法更新列表中的可排序项。

$（ '＃YourSortableList'）排序（ “刷新”）;

我不确定我在下面做的是你所追求的行为，但希望它会让你朝着正确的方向前进。

$('#_ulAllItems, #_ul').sortable({
    stop: function (event, ui) {
        //storeAndUpdateGroupItems();
    },
    connectWith: ".connectedSortable, #trashCan"
}).disableSelection();

$('#trashCan').droppable({
    accept: '#_ul li',
    tolerance: 'pointer',
    drop: function (event, ui) {
        console.log(ui.draggable);
        $('#_ulAllItems').append(ui.draggable);
        ui.draggable.remove();

        //Added refresh statement below
        $('#_ulAllItems').sortable("refresh");
        //storeAndUpdateGroupItems();
    }
});

请在此处查看我的jsfiddle代码：http://jsfiddle.net/kjqxc/

有关详细信息，请参阅jQuery UI文档：http://jqueryui.com/demos/sortable/#method-refresh

jQuery - 2个可排序列表：如何将删除的li添加回列表1

1 个答案: