jQuery Sortable兄弟グループ化

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を持つ属性をBに追加します。次に、ソート可能な.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>