jQuery-ui sortable - 禁用后再次启用可排序

Question

我有以下 jQuery 代码：

var isOk = true;
$('#edit').click(function () {
    if (isOk) {
        $('table tbody').sortable({
            axis: 'y',
            update: function (event, ui) {
                var data = $(this).sortable('serialize');
                $.ajax({
                    data: data,
                    type: 'POST',
                    url: 'updatePagesOrder.php',
                    success: function (msg) { //re-number the rows from 1 to n
                        $('table > tbody tr').each(function (i) {
                            $(this).attr('id', 'item-' + (i + 1)); // use $(this) as a reference to current tr object
                        });
                    },
                    error: function () {
                        alert("An error occurred");
                    }
                });
            }
        }, "enable");
    }
    else {
        $("table tbody").unbind();
        $('table a').unbind();
    }
    isOk = !isOk;

在上面的代码中，#edit 是一个按钮，第一次点击它会导致表格行可排序，第二次点击它会禁用可排序选项。

我希望在第三次单击时，行将再次可排序。 上面的代码我试过了，还是不行。

为什么？我该如何解决？谢谢！

Answer 1

在点击处理程序之外初始化小部件：

$('table tbody').sortable({
    disabled: true, // Initially disabled
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');
        $.ajax({
            data: data,
            type: 'POST',
            url: 'updatePagesOrder.php',
            success: function (msg) { //re-number the rows from 1 to n
                $('table > tbody tr').each(function (i) {
                    $(this).attr('id', 'item-' + (i + 1)); // use $(this) as a reference to current tr object
                });
            },
            error: function () {
                alert("An error occurred");
            }
        });
    }
});

然后只需在单击按钮时切换“禁用”选项。

$("#edit").click(function() {
    var table = $('table tbody');
    table.sortable('option', 'disabled', !table.sortable('option', 'disabled'));
});