jquery сортируемый удалить следующий ряд перед сортировкой

Question

У меня есть одна таблица, содержащая parent и child, как показано ниже. parent сортируются. Когда я пытаюсь отсортировать любого родителя, я должен удалить следующий child и вставить его после новой позиции.

<table>
    <tr class="parent"><td>Parent1</td></tr>
    <tr class="child nosort"><td>Child1</td></tr>
    <tr class="parent"><td>Parent2</td></tr>
    <tr class="child nosort"><td>Child2</td></tr>
    <tr class="parent"><td>Parent3</td></tr>
    <tr class="child nosort"><td>Child3</td></tr>
</table>

Так что, если я переместу Parent1 после Parent2, он будет выглядеть так:

<table>       
    <tr class="parent"><td>Parent2</td></tr>
    <tr class="child nosort"><td>Child2</td></tr>
    <tr class="parent"><td>Parent1</td></tr>
    <tr class="child nosort"><td>Child1</td></tr>
    <tr class="parent"><td>Parent3</td></tr>
    <tr class="child nosort"><td>Child3</td></tr>
</table>

Я сделал вставку потомка после sortupdate, но не смог выяснить, как удалить дочернюю строку перед сортировкой. Ниже, если код написан на start.

$('table').sortable({
    items: 'tr:not(.nosort)',
    start: function( event, ui ) {
        // Removal code of child before sort
        var objChild = ui.item.next();
        if( objChild.hasClass('child') ) {
            objChild.remove();
        }
    },
    update: function( event, ui ) {
    //  insertion code of child
    }
});

Answer 1

Чтобы ответить точно на то, что вы спросили:

• Сохранить следующие элементы в атрибуте data-* каждого .parent
• В сортируемом start Используйте событие jQuery .detach() для сохранения дочерних элементов в данных.
• При сортировке stop событие используйте .after() для вставки ранее отсоединенных элементов

$('.parent').each(function(i, e) {
   $(this).data('$next', $(this).nextUntil('.parent'));
});

$('table').sortable({
  items: 'tr:not(.nosort)',
  start: function( ev, ui ) {
    $next = $(ui.item.data('$next')).detach();    
  },
  stop: function(event, ui) {
    ui.item.after($next);
  }
});

<table>
  <tr class="parent"><td>1 Parent</td></tr>
  <tr class="child nosort"><td>1 Child</td></tr>
  <tr class="parent"><td>2 Parent</td></tr>
  <tr class="child nosort"><td>2 Child</td></tr>
  <tr class="parent"><td>3 Parent</td></tr>
  <tr class="child nosort"><td>3 Child</td></tr>
</table>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

но, как вы знаете, у вас может быть и P2 P1 C1 C2 ... но это был не ваш вопрос. В противном случае для решения этой проблемы лучше всего было бы go вернуться на доску и просто поместить два <div> в <td>

.