jQuery Sortable Sibling Grouping

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, который имеет идентификатор или что-то, что бы идентифицировать 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>