jQuery ui 可排序：切换启用 - 禁用列表可排序

Question

我在 CMS 管理页面中通过 AJAX 生成了多个列表，使用户能够浏览不同级别的内容。每个列表元素都是在用户单击上一个列表时生成的。我使用 jQuery:

$('#divid').on('click', 'ul', function() {
  //code to modify lists
  toggle_sortable();
});

现在我正在尝试添加一个切换按钮 "Drag" 以启用和禁用 jQuery-UI sortable()。但是，由于列表是动态生成的，我无法完美地实现它。当前 toggle_sortable() 看起来像：

function toggle_sortable() {
  $('#drag').on('click', function(){
    //statement to check if sortable() is enabled and change state accordingly
  });
}

请帮我想办法解决这种情况。基本上我无法确定是否在特定列表上启用了 sortable()。

Answer 1

我不完全确定我理解了这个问题，但您一直在将点击处理程序堆放在相同的元素上。要么过滤掉那些有它的，要么每次添加时，先删除，像这样：

```

$('#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
}

```

Answer 2

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

要enable/disable可排序可以使用如下函数：

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

Answer 3

感谢大家的帮助！对不起，我无法准确解释问题。但是我使用了您的输入并得到了以下代码：

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

以上代码将启用和禁用 sortable()，但不会将 sortable() 应用于新附加的元素。对于那些我在附加这些列表的函数中使用了以下行。

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

jQuery ui 可排序：切换启用 - 禁用列表可排序

jQuery ui sortable: Toggle enable - disable sortable on the lists

javascript

jquery

jquery-ui

sortables

jquery-ui-sortable