0

それは実際に可能ですか？

これが私の簡略化されたモックアップです。緑色の行には複数のセルを含めることができ、ドラッグ/並べ替え可能である必要があります。これらは、上から下までどこにでもドラッグできます。赤血球は日付であるため、常に所定の位置にとどまります。

これが私のコードです:

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

1 に答える 1

0

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();
});
于 2013-07-12T01:28:29.337 に答える