jQuery的UI可排序 - 再次啓用排序它已被禁用之後

Question

我有以下jQuery代碼：

var isOk = true; 
$('#edit').click(function() { 
    if (isOk) { 
     $('table tbody').sortable({ 
      axis: 'y', 
      update: function (event, ui) { 
       var data = $(this).sortable('serialize'); 
       $.ajax({ 
        data: data, 
        type: 'POST', 
        url: 'updatePagesOrder.php', 
        success: function (msg) { //re-number the rows from 1 to n 
         $('table > tbody tr').each(function (i) { 
          $(this).attr('id', 'item-' + (i + 1)); // use $(this) as a reference to current tr object 
         }); 
        }, 
        error: function() { 
         alert("An error occurred"); 
        } 
       }); 
      } 
     }, "enable"); 
    } 
    else { 
     $("table tbody").unbind(); 
     $('table a').unbind(); 
    } 
    isOk = !isOk; 

在上述#edit的代碼是一個按鈕，在第一點擊它導致表的行是可以忍受，並在第二次點擊它禁用排序選項。

我希望在第三次點擊行後可以再次排序。 我試過上面的代碼，但它沒有工作。

爲什麼？我該如何解決它？謝謝！

Answer 1

初始化插件的點擊處理程序外：

$('table tbody').sortable({ 
    disabled: true, // Initially disabled 
    axis: 'y', 
    update: function (event, ui) { 
     var data = $(this).sortable('serialize'); 
     $.ajax({ 
      data: data, 
      type: 'POST', 
      url: 'updatePagesOrder.php', 
      success: function (msg) { //re-number the rows from 1 to n 
       $('table > tbody tr').each(function (i) { 
        $(this).attr('id', 'item-' + (i + 1)); // use $(this) as a reference to current tr object 
       }); 
      }, 
      error: function() { 
       alert("An error occurred"); 
      } 
     }); 
    } 
}); 

然後只需撥動當你點擊按鈕「已禁用」選項。

$("#edit").click(function() { 
    var table = $('table tbody'); 
    table.sortable('option', 'disabled', !table.sortable('option', 'disabled')); 
});