动态禁用 jQuery UI 可排序元素

Question

我有许多 jQuery UI 可排序的父元素。每个父元素最多可以包含一个可放置的子元素，因此：

• 如果容器为空，它应该能够从任何其他容器接收可放置元素
• 如果容器不是空的：
  • 它应该无法从另一个容器接收可放置元素
  • 但当前子元素应该可以拖放到任何其他空父元素

为了帮助实现这一点，所有父元素都具有类drop_target_cell，而空父元素具有类empty_drop_target_cell。这些会随着可放置元素的分配而更新。

为了实现这一点，我尝试在用户开始拖动可放置元素时禁用类 drop_target_cell 但不是类 empty_drop_target_cell 的任何元素，然后在拖动操作时重新启用类 drop_target_cell 的所有元素完成。然而，这并不像我预期的那样工作；仍然可以将可放置元素拖到已经有子元素的父容器中。

以下是我的最大努力，添加了背景颜色更改，这些更改（正确）指示在拖动开始时应禁用哪些父元素：

$("#available_sections, td.drop_target_cell").sortable({
    connectWith: "#available_sections, td.drop_target_cell",
    start: function (event, ui) {
        $("td.drop_target_cell:not(td.drop_target_cell.empty_drop_target_cell)").css('background-color', '#ff00ff');
        $("td.drop_target_cell:not(td.drop_target_cell.empty_drop_target_cell)").sortable("disable");
    },
    stop: function (event, ui) {
        $("td.drop_target_cell").css('background', 'none');
        $("td.drop_target_cell").sortable("enable");
    }
});
$("td.drop_target_cell").on("sortremove", function (event, ui) {
    $(this).addClass('empty_drop_target_cell');
});
$("td.drop_target_cell").on("sortreceive", function (event, ui) {
    $(this).removeClass('empty_drop_target_cell');
});

有没有更好的方法，或者我可以改变什么来让它工作？

Answer 1

我设法使用下面的代码来解决这个问题。所有放置目标都具有 drop_target_cell 类，并且填充的放置目标（应该只允许删除项目）具有 populated_drop_target_cell 类。

对于任何偶然发现此问题的人来说，有两个重要的经验教训：

• 要使更改生效，您必须在更改后致电$(this).sortable("refresh")。

• 可排序列表元素祖先中的任何位置 css（fixed、relative 等）都可能会干扰可排序。如果任何事情都没有按预期工作并且您找不到原因，那么可能就是这样。另请参阅this question（这让我挠了好几个小时）。

  $("td.drop_target_cell").sortable({
      connectWith: "td.drop_target_cell",
      start: function (event, ui) {
          $("td.drop_target_cell.populated_drop_target_cell").sortable("option", "disabled", true);
          $(this).sortable("refresh");
      },
      stop: function (event, ui) {
          $("td.drop_target_cell").sortable("option", "disabled", false);
          $(this).sortable("refresh");
      }
  });