启用和禁用 jquery 可排序在单击时

Enable and disable jquery sortable on click

本文关键字：排序 单击 jquery 启用      更新时间：2023-09-26

我有一个按钮，我在点击时可以切换。此按钮在我的 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。任何意见将不胜感激。我查看了堆栈溢出，但没有找到任何处理此问题的具体问题。

使用外部函数切换可排序的启用禁用

$(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");
    }
以下是

启用/禁用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");
  }
});
相关文章：