在点击时启用和禁用可排序的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");
  }
});