单击启用和禁用jquery sortable

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

后两段代码甚至不会导致翻译glyphicon。任何投入将不胜感激。我查看了堆栈溢出，但没有找到任何处理此问题的具体问题。

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