jQuery를 UI를 정렬 - 비활성화 된 후 다시 정렬 할 수 있습니다

Question

나는 다음과 같은 jQuery 코드가 있습니다 #edit 위의 코드에서

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; 

이 버튼은, 처음에이 될 테이블 행을 일으킬 클릭 두 번째 클릭시 정렬 가능한 옵션이 비활성화됩니다.

세 번 클릭하면 행을 다시 정렬 할 수 있기를 바랍니다. 위 코드를 시도했지만 작동하지 않았습니다.

왜? 어떻게 해결할 수 있습니까? 감사!

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')); 
});