jQuery可排序兄弟分组

Question

我想知道是否可以将可排序项目分组，如果一个类存在下一个兄弟姐妹。这里是一个简化版本的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类，那么把它们放在一起。

我想避免让小组成为小孩，但如果没有其他方式，我将不得不看看那个。

有没有办法做到这一点？我认为最糟糕的情况是我将这些项目移到后面，但我希望排序是拖动组，而不仅仅是单个项目。

Answer 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>