JQuery UI Sortable:带有多组行的表？

Question

我有一个HTML表(#view-page-table),它接近以下HTML:

<table id="view-page-table">
    <thead>
        <th>Header1</th>
        <th>Header2</th>
    </thead>
    <tbody>
        <tr><td>Group 1</td><td>Group 1</td></tr>
        <tr><td>Group 1</td><td>Group 1</td></tr>

        <tr><td>Group 2</td><td>Group 2</td></tr>
        <tr><td>Group 2</td><td>Group 2</td></tr>

        <tr><td>Group 3</td><td>Group 3</td></tr>
        <tr><td>Group 3</td><td>Group 4</td></tr>
    </tbody>
</table>

我的jQuery现在很简单:

function reOrder() {
    $("#view-page-table tbody").sortable({
        helper: function(e, ui) {
             ui.children().each(function() {
                 $(this).width($(this).width());
             });
             return ui;
        }
    }).disableSelection();
}

它似乎工作正常(辅助功能是在移动时保持单元宽度).唯一的问题是,我需要一次移动两个<tr>.换句话说,用户需要拖动所有第一组,第二组或第三组而不能仅拖动一行.我试图在表格中添加一个div,但我想这是一个禁忌.

Answer 1

我想我有解决方案,但不是最佳的.试着在里面制作表格

<tbody>
        <tr><td>Group 1</td><td>Group 1</td></tr>
        <tr><td>Group 1</td><td>Group 1</td></tr>
</tbody>
<tbody>
        <tr><td>Group 2</td><td>Group 2</td></tr>
        <tr><td>Group 2</td><td>Group 2</td></tr>
</tbody>
<tbody>
        <tr><td>Group 3</td><td>Group 3</td></tr>
        <tr><td>Group 3</td><td>Group 4</td></tr>
</tbody>

并用这个替换你的脚本

function reOrder() {
    $("#view-page-table").sortable({
        helper: function(e, ui) {
             ui.children().each(function() {
                 $(this).width($(this).width());
             });
             return ui;
        },
        handle: "tbody"
    }).disableSelection();
}

最好的运气