javascript - jQuery-ui可排序取消

所以我有一个我想解决的问题，我还没有在线找到答案（所以）...所以我想我会尝试询问是否有人可以在我继续搜索的同时提供任何见解...我有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中。我尝试使用“取消”选项，但是仅恢复上一次拖放的项目。

场景：
清单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();

最佳答案

现在这是我在做什么：

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

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

关于javascript - jQuery-ui可排序取消，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19664683/