Sortable js none-jquery plugin sorts divs but not tables

Question

I am using this Sortable plugin by Rubaxa, with the help of which I would like to sort my nested tables with the class of "block".

HTML

<table id="table">
    <tbody>
        <tr class="block">
            <td>
                <table>
                    <tr>
                        <td>item 1</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr class="block">
            <td>
                <table>
                    <tr>
                        <td>item 2</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>
<div id="div">
    <div class="block">1</div>
    <div class="block">2</div>
</div>

JS

var el = document.getElementById('table'),
    newEl = document.getElementById('div');
new Sortable(el, {
    draggable: '.block'
});
new Sortable(newEl, {
    draggable: '.block'
});

But I cannot get it to work with tables. Does this plugin allow sorting only direct children? And is it because of the structure of tables it wont work? Or is it for some other reason?

jsFiddle link

Answer 1

It only works for first level children:

Solution

Ad an ID to tbody

<tbody id="rows">

Use this id to apply sort.

el = document.getElementById('rows')

Working example