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

时间:2017-12-26 04:06:22

标签: javascript jquery jquery-ui jquery-ui-sortable sortables

我的CMS管理页面中有多个通过AJAX生成的列表,用户可以浏览各种级别的内容。每个列表元素都是在用户单击上一个列表时生成的。我使用jQuery:

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

enter image description here

现在我尝试添加一个切换按钮“拖动”以启用和禁用jQuery-UI sortable()。但是,由于列表是动态生成的,因此无法完美实现。目前toggle_sortable()看起来像是:

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

请帮助我在这种情况下找到解决方案。基本上我无法确定是否在特定列表中启用了sortable()

3 个答案:

答案 0 :(得分:3)

以下是动态初始化列表的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');
      }
    });

答案 1 :(得分:0)

我不完全确定我理解了这个问题,但是你仍然将点击处理程序堆积到相同的元素上。过滤掉那些拥有它的人,或者每次添加时,首先删除,如下所示:

```

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

```

答案 2 :(得分:0)

谢谢你们的帮助!对不起,我无法准确解释这个问题。但是我使用了您的输入并最终得到以下代码:

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