jquery-ui - jQueryUI 可排序 | 在不同的父母之间拖动元素

Question

真的有可能吗？

这是我的简化模型。绿色行可以有多个单元格，并且必须是可拖动/可排序的。它们可以从上到下拖动到任何地方。红细胞总是留在原地，因为它们是日期。

这是我的代码：

<table>
    <tr>
        <td>May 01</td>
        <td>
            <table>
                <tr>
                    <td>Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>May 02</td>
        <td>
            <table>
                <tr>
                    <td>Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
                <tr>
                    <td>Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>May 02</td>
        <td>
            <table>
                <tr>
                    <td>Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
                <tr>
                    <td>Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
                <tr>
                    <td>Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 1

JSFIDDLE

HTML

<table>
    <tbody>
    <tr>
        <td>May 01</td>
        <td class="mt3">
            <table>
                <tr>
                    <td>1 Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>May 02</td>
        <td class="mt3">
            <table>
                <tr>
                    <td>2 Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
                <tr>
                    <td>3 Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>May 02</td>
        <td class="mt3">
            <table>
                <tr>
                    <td>4 Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
                <tr>
                    <td>5 Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
                <tr>
                    <td>6 Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
            </table>
        </td>
    </tr>
    </tbody>
</table>

脚本

$(function() {
    $(".mt3 tbody").sortable({
            connectWith: ".mt3 tbody",
            start: function (event, ui) {
                    ui.item.toggleClass("highlight");
            },
            stop: function (event, ui) {
                    ui.item.toggleClass("highlight");
            }
        });
    $("td").disableSelection();
});