javascript - jquery-ui可排序取消

Question

所以我有一个问题想解决，我还没有在网上找到答案……所以我想我会试着问问是否有人可以在我继续搜索的同时提供任何类型的见解...我有 2 个可排序列表，如下所示:

列表 1

• 列出 1 项 1 <删除图标>
• 列出 1 项 2 <删除图标>
• 列出 1 项 3 <删除图标>

列表 2

• 列出 2 项 1
• 列出 2 项 2
• 列出 2 项 3

细节: 列表 2 使用“connectWith:”选项连接到列表 1，这意味着我只允许将列表 2 中的元素拖到列表 1 中，反之亦然。正如我在上面的设置中所示，列表 1 元素有一个删除图标，它允许我删除添加到列表 1 中的任何元素。当列表 2 中的元素被拖到列表 1 中时，我附加这个删除图标，它会给我也可以删除拖动的元素。

问题: 现在问题来了，如果我在最初来自列表 2 的元素上点击列表 1 上的删除图标，那么我想将该元素恢复到列表 2 中。我尝试使用“取消”选项，但是仅恢复最后拖放的元素。

场景: list 1

• 列出 1 项 1 <删除图标>
• 列出 1 项 2 <删除图标>
• 列出 1 项 3 <删除图标>
• 列出 2 项 1 <删除图标>
• 列出 2 项 2 <删除图标>

如果我单击列表 2 元素 1 上的删除图标，我只想将列表 2 元素 1 恢复回列表 2，并保持列表 2 元素 2 在列表 1 中...

任何建议将不胜感激 HTML:

<ul id="cur-dist-list">
<li class="ui-state-default">List 1 Item 1 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
<li class="ui-state-default">List 1 Item 2 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
<li class="ui-state-default">List 1 Item 3 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
<li class="ui-state-default">List 1 Item 4 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
<li class="ui-state-default">List 1 Item 5 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
</ul><br /><br />
<ul id="prev-dist-list">
<li class="ui-state-default">List 2 Item 1</li>
<li class="ui-state-default">List 2 Item 2</li>
<li class="ui-state-default">List 2 Item 3</li>
<li class="ui-state-default">List 2 Item 4</li>
<li class="ui-state-default">List 2 Item 5</li>
</ul><br /><br />
<button id="doc-dist-submit-button" style="cursor:pointer;">Submit</button>

Javascript:

$("#doc-dist-submit-button").button();
    $("#cur-dist-list").sortable({
        dropOnEmpty: true,
        receive: function(event, ui) {
            var dropElemTxt = $(ui.item).text();

$(ui.item).replaceWith('<li class="ui-state-default prev-prov">' + dropElemTxt + 
'<a href="#" id="remove-prov-' + ($("#cur-dist-list li").size()) + '" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>');
        },
        placeholder: {
            element: function(currentItem, ui) {
                return $('<li class="selected">' + currentItem[0].innerHTML + '</li>');
            },
            update: function(container, p) {
                return;
            }
        }
    }).disableSelection();

    $("#cur-dist-list").on("click", "a", function(){

        $(this).parent("li").remove();

        if($(this).parent("li").hasClass("prev-prov")){
            $("#prev-dist-list").sortable('cancel');
        }
    });

    $("#prev-dist-list").sortable({
        connectWith: "#cur-dist-list",
        placeholder: {
            element: function(currentItem, ui) {
                return $('<li class="selected">' + currentItem[0].innerHTML + '</li>');
            },
            update: function(container, p) {
                return;
            }
        }
    }).disableSelection();

Answer 1

现在这就是我正在做的:

$("#prev-dist-list").append('<li class="ui-state-default">' + $(this).parent("li").text() + '</li>');

在图标的点击事件上，这似乎工作正常，现在我只需要在正确的地方订购商品