jQuery 可排序的兄弟分组答案

【问题标题】：jQuery Sortable Sibling GroupingjQuery 可排序的兄弟分组
【发布时间】：2017-02-16 17:17:34
【问题描述】：

我想知道如果下一个兄弟姐妹存在一个类，是否可以对可排序项目进行分组。这是 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 将像往常一样单独排序。组规则是，如果它没有 groupWith 并且直接兄弟有 groupWith 类，则将它们放在一起。

我想避免小时候和他一起组团，但如果没有其他办法，我将不得不考虑。

有没有办法做到这一点？我想更糟糕的情况是我在之后移动了这些项目，但我希望 sortable 能够拖动组，而不仅仅是单个项目。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

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

我要解决的方法是向 B 添加一个具有 id 或标识 C 的属性。然后在可排序的 .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>

【讨论】：

谢谢。我认为这样做可能是唯一的方法。我不必创建connectedTo。我可以简单地存储 nextUntil(':not(.groupWith)') 项目并在更新时移动它们，但它的想法相同，所以我将其标记为正确。