jquery sortable 在排序前删除下一行

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

回答准确你问的：

• 将下一个元素存储到每个.parent 的data-* 属性中
• 在可排序的start 事件上使用jQuery's .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 ...但这不是您的问题。否则，要解决这个问题，最好的办法就是回到白板，只需将两个 <div>s 放入 <td>

Answer 2

我知道这是一个旧线程，但我认为我的回答可以帮助某人。这是 Roko C. Buljan 帖子的更新版本。

$('.parent').each(function() {
 $(this).data('$children', $(this).nextUntil('.parent'));
});

var children = {};

$('table').sortable({
  items: 'tr:not(.nosort)',
  start: function() {
    $('.parent').each(function() {
       children[this.id] = $($(this).data('$children')).detach()
    });
  },
  stop: function(event, ui) {
    $('.parent').each(function() {
       $(this).after(children[this.id]);
    });
  }
});

td {
  padding: 1rem;
}

.red {
  background-color: red;
}

.blue {
  background-color: lightblue;
}

.green {
  background-color: green;
}

<table style="padding: 1rem">
  <tr class="parent red" id="one"><td>1 Parent</td></tr>
  <tr class="child nosort red"><td>1 Child</td></tr>
  <tr class="parent blue" id="two"><td>2 Parent</td></tr>
  <tr class="child nosort blue"><td>2 Child</td></tr>
  <tr class="parent green" id="three"><td>3 Parent</td></tr>
  <tr class="child nosort green"><td>3 Child</td></tr>
  <tr class="child nosort green"><td>3 Child</td></tr>
  <tr class="child nosort green"><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>