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

Question

请参阅上图。我可以在GROUP1中对Kerwin和Bonn进行排序/交换。我也可以互换GROUPS。现在我的问题是如何将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>