jQuery 可排序的兄弟分组

Question

我想知道如果下一个兄弟姐妹存在 class，是否可以对可排序的项目进行分组。这是 HTML 的简化版本：

<div class="itemClass">A</div>
<div class="itemClass">B</div>
<div class="itemClass groupWith">C</div>
<div class="itemClass">D</div>

我需要它，这样如果你拖动 B，C 也会跟着它。 A、C 和 D 将照常单独排序。 groups 规则是，如果它没有 groupWith 并且直系兄弟姐妹有 groupWith class，请将它们放在一起。

我想避免小时候一起组，但如果没有其他办法，我将不得不看看那个。

有什么办法吗？我想最糟糕的情况是我在之后移动这些项目，但我希望 sortable 拖动组，而不仅仅是单个项目。

Answer 1

没有很好的方法来做到这一点（据我所知）。

我要解决的方法是向 B 添加一个属性，该属性具有标识 C 的 id 或其他内容。然后在 sortable 的 .update 函数中，您可以检查已排序的元素是否具有此属性，如果有分离然后附加 C.

类似

$(".sortable").sortable({
  update: function(event, ui){
    if (ui.item.attr('connectedTo')){
      $('#'+ui.item.attr('connectedTo')).detach().insertAfter(ui.item);
    }
  }
}).disableSelection();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="sortable">
<div id="A">A</div>
<div id="B" connectedTo="C">B</div>
<div id="C">C</div>
<div id="D">D</div>
</div>

jQuery 可排序的兄弟分组

jQuery Sortable Sibling Grouping

jquery

jquery-ui

jquery-ui-sortable