我有一个可以点击的按钮。这个按钮可以在我的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");
    }
});


后两段代码甚至不会引起字形转换。任何投入将不胜感激。我查看了堆栈溢出,但没有发现任何与此问题相关的特定问题。

最佳答案

使用外部功能切换可排序的启用-禁用

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

10-05 23:02
查看更多