3

我的页面上有两个 UL。UL1 和 UL2。两者都是可排序和可拖动的。当来自 UL1 的 LI 添加到 UL2 时，LI 移出 UL1。为了从 UL2 中删除，用户单击 LI 内的删除链接。逻辑是删除该项目，并将其从 UL2 添加回 UL1。

这是我的代码：

$(".xOut").on("click", function(){
        var id = $(this).attr('id');
        $.ajax({

            url: '@Url.Action("RemoveCommand")',
            type: "POST",
            data: {
                aid: id,
                bId: @(Model.Id)
            },
            success: function(event, ui){
                var newListItem = $("<li />", {
                    html: $("#"+id).html()
                });

                $(newListItem).attr("id", id);

                newListItem.appendTo("#sortable1");
                $("#"+id).remove();
            }
        });
    });

如果我不添加此行，代码可以正常工作：

$(newListItem).attr("id", id);

我需要新项目有一个 id，没有它就无法工作。

如何使这项工作？

更新添加的 HTML 代码：

<ul id="sortable1" class='droptrue'>
 @for (var i = 0; i < Model.SomeList.Count(); i++)
 {
     var item = @Model.SomeList.ElementAtOrDefault(i);
     if (item != null)
     { 
        <li id="@(item.Id)">
           <div>@item.Name</div>
       </li>
     }
 }
</ul>

<ul id="sortable2" class='droptrue'>
     @for (var i = 0; i < Model.SomeAssignedList.Count(); i++)
     {
         var item = @Model.SomeAssignedList.ElementAtOrDefault(i);
         if (item != null)
         { 
            <li id="@(item.Id)">
           <div>@item.Name</div>
           </li>
         }
     }
    </ul>
4

2 回答 2

3

无需创建新项目并删除旧项目，只需移动它：

$(".xOut").on("click", function(){
  var id = $(this).attr('id');
  $.ajax({
    url: '@Url.Action("RemoveCommand")',
    type: "POST",
    data: {
      aid: id,
      bId: @(Model.Id)
    },
    success: function(event, ui){
      $("#sortable1").append($("#"+id));
    }
  });
});
于 2012-04-15T06:54:30.680 回答
1

我不确定为什么这涉及 ajax 调用，但无论如何 - 为什么不删除旧项目，然后再添加具有相同 id的新项目？

于 2012-04-15T06:32:16.023 回答