3

私のページには 2 つの 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 が必要で、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 に答える