Question

实际上可能吗？

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

这是我的code：

<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>

<强> SCRIPT

$(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();
});

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

1 个答案: