jQuery ui可排序:切换启用-禁用列表上的可排序

这是 working DEMO 动态初始化列表并在单击按钮时在列表上切换可排序。

要启用/禁用可排序功能,可以使用如下所示的功能:

$('#toggle').click(function() {
        //check if sortable() is enabled and change and change state accordingly
      // Getter
      var disabled = $("#sortable").sortable( "option", "disabled" );
      if (disabled) {
        $("#sortable").sortable( "enable" );
        $('#status').html('Sortable is now Enabled!!');
      }
      else {
        $("#sortable").sortable("disable");
        $('#status').html('Sortable is Disabled');
      }
    });

我不完全确定我是否理解这个问题,但您一直在将单击处理程序堆积到相同的元素。要么过滤掉那些有它的,要么每次添加时,先删除,如下所示:

```

$('#drag').off("click", doit).on('click', doit);

function() doit{
//statement to check if sortable() is enabled and change state accordingly
// $(this) will be jquery reference to "#drag" element
}

```

谢谢大家的帮助!很抱歉,我不能准确地解释这个问题。然而,我使用了您的输入,最终得到了以下代码:

$('#drag').on('click', function () {
    event.preventDefault();
    $(this).toggleClass('sortable');
    if ($('#drag').hasClass('sortable')) {
        $('#div ul').sortable();
    } else {
        $('#div ul').sortable('destroy');
    }
});

上述代码将启用和禁用 sortable() 但它不适用 可排序() 添加到新附加的元素。对于那些我在附加这些列表的函数中使用了以下行。

if ($('#drag').hasClass('sortable')) {
    $('#ulid').sortable();
}