在點擊時啟用和禁用可排序的jQuery

Question

我有一個可以點擊的按鈕。 這個按鈕在我的html中名為“ subtaskTaskList”的列表上啟用jquery可排序類。 但是，我可以使按鈕切換，但是可排序的啟用和禁用似乎沒有響應。 見下面的代碼。

<button id="sortButton" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-adjust"></span></button>

 $("#sortButton").click(function(){
    if($("#sortButton").hasClass("glyphicon-adjust")){
        $("#subtaskTaskList").sortable();
        $("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
    }else{
     $("#subtaskTaskList").sortable('disable');
        $("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
    }
});

這段代碼使我在控制台中出現一個錯誤，說如果未初始化sortable，則不能將其禁用。 我嘗試過此代碼的變體，包括：

$("#sortButton").click(function(){
    if($("#sortButton .glyphicon").hasClass("glyphicon-adjust")){
        $("#subtaskTaskList").sortable();
        $("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
    }else{
     $("#subtaskTaskList").sortable('disable');
        $("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
    }
});

以及：

$("#sortButton").click(function(){
    if($("#sortButton").find("span").hasClass("glyphicon-adjust")){
        $("#subtaskTaskList").sortable();
        $("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
    }else{
     $("#subtaskTaskList").sortable('disable');
        $("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
    }
});

后兩段代碼甚至不會引起字形轉換。 任何投入將不勝感激。 我查看了堆棧溢出，但沒有發現任何與此問題相關的特定問題。

Answer 1

使用外部功能切換可排序的啟用-禁用

$(document).on("click","button#switcher",function(){
    sortDisable();
})

function sortDisable() {
    $( "ul#sortme" ).sortable("disable");
}

所以用你的代碼：

$("#sortButton").click(function(){
        if($("#sortButton").find("span").hasClass("glyphicon-adjust")){
            sortEnable("#subtaskTaskList");
            $("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
        }else{
            sortDisable("#subtaskTaskList");
            $("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
        }
    });


    function sortEnable( target ) {
        $( target ).sortable("enable");
    }
    function sortDisable( target ) {
        $( target ).sortable("disable");
    }

Answer 2

這是啟用/禁用sortable() ：

$('#sortButton').click(function() {
    //check if sortable() is enabled and change and change state accordingly
  // Getter
  var disabled = $("#subtaskTaskList").sortable( "option", "disabled" );
  if (disabled) {
    $("#subtaskTaskList").sortable( "enable" );
    $("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
  }
  else {
    $("#subtaskTaskList").sortable("disable");
    $("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
  }
});