JQuery 多排序表行答案

【问题标题】：JQuery multisortable table rowsJQuery 多排序表行
【发布时间】：2015-01-09 17:33:06
【问题描述】：

我的表格行如下：

<table id="list" class="sortable">
    <tr class="parent"><td>Item 1</tr>
    <tr class="child"><td> - Item 1a</td></tr>
    <tr class="child"><td> - Item 1b</td></tr>
    <tr class="parent"><td>Item 2</td></tr>
    <tr class="child"><td> - Item 2a</td></tr>
    <tr class="child"><td> - Item 2b</td></tr>
    <tr class="child"><td> - Item 2c</td></tr>
</table>

我想拖放这个表格 > tr 使用 jQuery 排序如下：

.child 类只能与同一父类的其他子类排序。 IE。 第 1a 项和 第 1b 项之间
.parent 类只能与其他父类排序。 IE。 项目 1 和 项目 2 之间
在排序/拖动.parent 类时，它的子元素也应该一起拖动。

我的要求的工作示例在这里：http://jsfiddle.net/3kdSZ/8/

但它有 div's 和兄弟姐妹。

上面的table Html 标记是否有可能达到类似的效果？

【问题讨论】：

您的标记无效。您应该将 tr 的子内容包裹在 td 元素中。
为什么不将子项包装在父项中。
@MilindAnantwar 我正在尝试对 WordPress 帖子列表表进行排序。在 parent 中包装元素会完全破坏布局。
如果你使用真正的标记进行演示不是更好吗？与您正在做的事情无关的演示有什么意义。顺便说一句，您可以拒绝丢弃

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

您可以有多个 tbody 部分将您的 trs 分组，然后将它们设为 sortable

$(".sortable").sortable({
  items: "tbody",
  handle: ".parent"
});
$("tbody").sortable({
  items: ".child"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<table id="list" class="sortable">
    <tbody>
    <tr class="parent"><td>Item 1</td></tr>
    <tr class="child"><td> - Item 1a</td></tr>
    <tr class="child"><td> - Item 1b</td></tr>
    </tbody>
    <tbody>
    <tr class="parent"><td>Item 2</td></tr>
    <tr class="child"><td> - Item 2a</td></tr>
    <tr class="child"><td> - Item 2b</td></tr>
    <tr class="child"><td> - Item 2c</td></tr>
    </tbody>
</table>

【讨论】：