jQuery ui sortable：切換啟用 - 禁用列表上的可排序

Question

我在CMS管理頁面中通過AJAX生成了多個列表，使用戶可以瀏覽各種級別的內容。 每個列表元素都是在用戶單擊上一個列表時生成的。 我用jQuery：

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

現在我嘗試添加一個切換按鈕“拖動”以啟用和禁用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

這是工作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');
      }
    });

Answer 2

我不完全確定我理解了這個問題，但你仍然將點擊處理程序堆積到相同的元素上。 要么過濾掉那些有它的，要么每次添加，首先刪除，如下所示：

```

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