Question

所以我有一个问题，我试图解决，为此我还没有在网上找到答案（还）...所以我想我会试着看看是否有人可以提供任何形式的见解，而我继续搜索...我有2个可排序列表如下：

列表1

列表1项目1＆lt;删除图标＆gt;
列表1项目2＆lt;删除图标＆gt;
列表1项目3＆lt;删除图标＆gt;

列表2

清单2项目1
列表2项目2
清单2项目3

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

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

情形：清单1

列表1项目1＆lt;删除图标＆gt;
列表1项目2＆lt;删除图标＆gt;
列表1项目3＆lt;删除图标＆gt;
列表2项目1＆lt;删除图标＆gt;
列表2项目2＆lt;删除图标＆gt;

如果我点击列表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>');

关于图标的点击事件，这似乎工作正常，现在我只需要在正确的地方订购项目

Answer 2

看起来你已经回答了自己的问题。从第一个列表中删除时，您可以分离列表项并将appendTo（）返回到第二个列表（减去删除按钮）。

http://jsfiddle.net/Rusln/pCUJZ/

$("#workspace").sortable({
    receive:function(ev,ui){
        ui.item.append(" <button class='remove'>X</button>");
    }
});
$("#toolbox").sortable({
    connectWith:"#workspace"
});
$("#workspace").on("click",".remove",function(e){

    $(this).parent().detach().appendTo("#toolbox");
    $(this).remove();
});

Jquery-ui可以取消

2 个答案: