JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
    <table id="myt">
        <tbody>
            <tr>
                <td>body r1 c1</td>
                <td>body r1 c2</td>
            </tr>
            <tr>
                <td>body r2 c1</td>
                <td>body r2 c2</td>
            </tr>
            <tr>
                <td>body r3 c1</td>
                <td>body r3 c2</td>
            </tr>
            <tr>
                <td>body r4 c1</td>
                <td>body r4 c2</td>
            </tr>
            <tr>
                <td>body r5 c1</td>
                <td>body r5 c2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>footer r1 c1</td>
                <td>footer r1 c2</td>
            </tr>
            <tr>
                <td>footer r2 c1</td>
                <td>footer r2 c2</td>
            </tr>
            <tr>
                <td>footer r3 c1</td>
                <td>footer r3 c2</td>
            </tr>
            <tr>
                <td>footer r4 c1</td>
                <td>footer r4 c2</td>
            </tr>
        </tfoot>
    </table>
</body>

JavaScript

$(function () {
     $("#myt>tbody,#myt>tfoot").sortable({
         connectWith:"#myt>tbody,#myt>tfoot"
     });

 });