Question

我的页面上有两个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>

Answer 1

不要创建新项目并移除旧项目，只需移动它：

$(".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));
    }
  });
});

Answer 2

我不确定为什么这会涉及ajax调用，但无论如何 - 为什么不在添加相同ID 之前删除旧项

将id属性分配给li不起作用

2 个答案: