1

所以我有一个我试图解决的问题，我还没有在网上找到答案（还）......所以我想我会尝试询问是否有人可以在我继续搜索时提供任何见解......我有 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();
4

2 回答 2

0

现在这就是我正在做的事情：

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

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

于 2013-10-29T19:12:58.610 回答
0

看起来您已经回答了自己的问题。从第一个列表中删除时，您可以将列表项和 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();
});
于 2013-10-30T13:46:41.430 回答