在JQuery sortable（）函數期間傳遞列表項值

Question

我試圖將列表項目放入另一個列表中時，將信息從無序列表，列表項目傳遞給ajax請求。

這是拾取列表#id列表項被放入的JQuery，但獲取$ row ['id']的代碼獲取每個列表中的第一項，而不是特定項I'米排序。我使用PHP來迭代列表中的項目 - 我已經刪除了非必要的PHP代碼）。

<script type="text/javascript"> 
$(document).ready(function(){ 

$(".sortable").sortable({ 

connectWith : ".sortable", 
receive : function(){ 

     var column = $(this).closest('div.box').attr('id'); 
     var id = $(this).find('span').html(); 

     $.ajax({ 
       url: "update_column.php", 
       type:"POST", 
       data: "column="+column+"&id="+id 
       }); 

     alert(column + id) 

       } 

}) 
.disableSelection(); 

}); 
</script> 

我使用alert（）給了我一些視覺反饋。這是HTML代碼：

<div id="one" class="box"> 
    <ul class="sortable"> 


     <li> 
     <div class="card"> 
     <p>' . $row['customer'] . '</p> 
     <p>' . $row['ponumber'] . '</p> 
     <p class="hide"><b>ID:</b><span>' . $row['id'] . '</span></p> 
     <p class="hide">' . $row['misc'] . '</p> 
     </div> 
     </li>  



    </ul> 
    </div> 

    <div id="two" class="box"> 
    <ul class="sortable"> 


     <li> 
     <div class="card"> 
     <p>' . $row['customer'] . '</p> 
     <p>' . $row['ponumber'] . '</p> 
     <p class="hide"><b>ID:</b><span id="id">' . $row['id'] . '</span></p>  
     <p class="hide">' . $row['misc'] . '</p> 
     </div> 
     </li> 






    </ul> 
    </div> 

我是一個自學成才的程序員誰一直在編程了3個月，所以我對任何錯誤新手道歉。

Answer 1

我已經更新了您的js，它現在可用。我在需要的地方添加了評論。

$(document).ready(function(){ 

    $(".sortable").sortable({ 

     connectWith : ".sortable", 
     receive : function(event, ui){ 

      //changed this to be use parent() 
      var column = $(this).parent().attr('id'); 
      //get the current dragged item - as per http://jqueryui.com/demos/sortable/#event-receive 
      var index = ui.item.index() + 1 ; 
      //get the id from the span using the column we got in the first step and index we got above 
      var id = $("#"+column+" li:nth-child("+index+") span").html(); 

      $.ajax({ 
       url: "update_column.php", 
       type:"POST", 
       data: "column="+column+"&id="+id 
      }); 
     } 

    }).disableSelection(); 

});