可排序：将值移动到另一组

Question

参考上图。我可以 sort/interchange GROUP1 中的 Kerwin 和 Bonn。我也可以互换群组。现在我的问题是我如何 sort/move Kerwin 到其他组。示例：将 kerwin 移至组 2

这是演示 + 代码

$( ".content" ).sortable();
$( ".content" ).disableSelection();
$( ".subcontent" ).sortable();
$( ".subcontent" ).disableSelection();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<table id="subsortsortable">
        <tbody class="content">
            <tr><td>
                <table>
                    <thead>GROUP 1</thead>
                    <tbody class="subcontent">
                        <tr><td>Kerwin</td></tr>
                        <tr><td>Bonn</td></tr>
                    </tbody>
                </table>
            </td></tr>
            <tr><td>
                <table>
                    <thead>GROUP 2</thead>
                    <tbody class="subcontent">
                        <tr><td>Ivan</td></tr>
                        <tr><td>Bobby</td></tr>
                    </tbody>
                </table>
            </td></tr>
            <tr><td>
                <table>
                    <thead>GROUP 3</thead>
                    <tbody class="subcontent">
                        <tr><td>Wil</td></tr>
                        <tr><td>Michael</td></tr>
                    </tbody>
                </table>
            </td></tr>
        </tbody>
</table>

Answer 1

使用sortable({connectWith:['.subcontent']}),

$( ".content" ).sortable({
    dropOnEmpty: true
});
$( ".content" ).disableSelection();
$( ".subcontent" ).sortable({
    connectWith:['.subcontent', '>*:not(.sort-disabled)'],
    items:"tr[class!=sort-disabled]"
});
$( ".subcontent" ).disableSelection();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<table id="subsortsortable">
    <tbody class="content">
        <tr><td>
            <table>
                <thead>GROUP 1</thead>
                <tbody class="subcontent">
                    <tr><td>Kerwin</td></tr>
                    <tr><td>Bonn</td></tr>
                    <tr class="sort-disabled"><td>&nbsp;</td></tr>
                </tbody>
            </table>
        </td></tr>
        <tr><td>
            <table>
                <thead>GROUP 2</thead>
                <tbody class="subcontent">
                    <tr><td>Ivan</td></tr>
                    <tr><td>Bobby</td></tr>
                    <tr class="sort-disabled"><td>&nbsp;</td></tr>
                </tbody>
            </table>
        </td></tr>
        <tr><td>
            <table>
                <thead>GROUP 3</thead>
                <tbody class="subcontent">
                    <tr><td>Wil</td></tr>
                    <tr><td>Michael</td></tr>
                    <tr class="sort-disabled"><td>&nbsp;</td></tr>
                </tbody>
            </table>
        </td></tr>
    </tbody>
</table>

可排序：将值移动到另一组

Sortable: Move values to another group

jquery

jquery-ui-sortable