jQuery UI Drag & Drop using connectWith

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 class="ndd">
                <td>footer: not drag-n-sortable</td>
                <td>footer: not drag-n-sortable</td>
            </tr>
            <tr class="ndd">
                <td>footer: not drag-n-sortable</td>
                <td>footer: not drag-n-sortable</td>
            </tr>
            <tr class="ndd">
                <td>footer: not drag-n-sortable</td>
                <td>footer: not drag-n-sortable</td>
            </tr>
        </tfoot>
    </table>
</body>

CSS

td {
    border-collapse: collapse;
    border: 1px solid gray;
}
tfoot {
    background-color: yellow;
}
.ndd {background-color:pink}

JavaScript

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

 });