Сортируемый плагин js none-jquery сортирует div, но не таблицы

Question

Я использую этот плагин Sortable от Rubaxa, с помощью которого я бы хотел отсортировать вложенные таблицы по классу "блок".

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'
});

Но я не могу заставить его работать с таблицами. Позволяет ли этот плагин сортировать только прямых потомков? И это из-за структуры таблиц это не будет работать? Или это по какой-то другой причине?

ссылка jsFiddle

Answer 1

Работает только для детей первого уровня:

Решение

Объявление ID для tbody

<tbody id="rows">

Используйте этот идентификатор для применения сортировки.

el = document.getElementById('rows')

Рабочий пример

Answer 2

У меня тоже был такой же вопрос, и я нашел здесь отличный ответ.

<tbody id="sortrows">

var sort = new Sortable(sortrows, {
onSort: function (evt) {
    console.log(evt.oldIndex + ' -> ' + evt.newIndex);
    document.getElementById('displayText').innerHTML=evt.oldIndex + ' -> ' + evt.newIndex;
} });

Добавление рабочего примера