javascript - 可排序的 js 非 jquery 插件对 div 而非表进行排序

Question

我正在使用Rubaxa 的这个 Sortable 插件，在它的帮助下，我想用“块”类对我的嵌套表进行排序。

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

使用此 id 应用排序。

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

添加一个工作示例