jquery ui可排序列表不跟蹤列表項目屬性的更新

Question

我正在處理一個列表，其中的項目都是可選擇的（使用複選框）和可排序的（使用jquery'sortable'）。

名單如下：

<ul id="dragdrop"> 
    <li id="1290"><input type="checkbox" id="290" checked class="slideToggle" /><img ... /></li> 
    <li id="1291"><input type="checkbox" id="291" checked class="slideToggle" /><img ... /></li> 
</ul> 

...和JavaScript是這樣的：

$(".slideToggle").click(function() { 
    var slideId = $(this).attr("id"); 
    var checked = $(this).attr("checked"); 
    if (slideId) { 
     $.post("ToggleInclusion", { "slideId": slideId, "isChecked": checked }, 
      function() { 
       var newId = checked ? "1" : "0" + slideId; 
       $(this).parent().attr("id", newId); 
      }); 
    } 
}); 

$("#dragdrop").sortable({ 
    update: function() { 
     var order = $(this).sortable("toArray").toString(); 
     $.post("UpdateOrder", { "order": order }, function() { }); 
    } 
}); 

因此，當用戶未檢查的複選框，比如說，第二個項目（id = 291），其列表項更改爲

<li id="0291" ... ></li> 

我遇到的問題是此更改不是由可排序列表捕獲。當第二項未選中，然後拖到第一項之前的位置時，發送到服務器的訂單字符串應爲「0291,1290」時爲「1291,1290」。

我已經嘗試撥打電話到$("#dragdrop").sortable("refresh")和朋友都在切換回調結束，也就在排序更新後，但沒有骰子。

任何想法？

Answer 1

所以解決的辦法就是不與排序方法在所有的麻煩 - 只是直接從複選框搶所需的性能：

$(".slideToggle").click(function() { 
    var slideId = $(this).attr("id"); 
    var checked = $(this).attr("checked"); 
    if (slideId) { 
     $.post("ToggleInclusion", { "slideId": slideId, "isChecked": checked }, 
      function() { }); 
    } 
}); 

$("#dragdrop").sortable({ 
    update: function() { 
     var order = $(".slideToggle").map(function() { 
      return ($(this).attr("checked") ? "1" : "0" + $(this).attr("id"); 
     }).get().join(","); 
     $.post("UpdateOrder", { "order": order }, function() { }); 
    } 
}); 

Answer 2

而不是使用「更新」事件，而是嘗試「停止」，而不是連接你自己的排序變種。

$("#dragdrop").sortable({ 
    stop: function() { 
    var order = ""; 
    $("#dragdrop").find("tr").each(function() { 
     order = order + $(this).attr("id") + ","; 
    }); 
    if(order.length > 0) order = order.substr(0, order.length - 1); // remove the last comma 
    $.post("UpdateOrder", { "order": order }, function() { }); 
    } 
}); 

希望這對你有用！