使用 sortable.js 对列表进行排序

Question

如何使用 sortable.js 库对列表进行排序？ https://sortablejs.github.io/Sortable/

我在 tr 属性上设置了 sortable_container(sortable_emploees id)。 这很好用。 但是如何在tbody中同时对td进行排序呢？

请看动图。 Tbody 不可排序。 如何创建表格以拖放 thead 单元格和 tbody 单元格。 或者如何设置 sortable.js 为我做那件事？

检查示例代码：

        const el = document.getElementById('sortable_employees');
        const sortable = new Sortable(el, {
            animation: 150,
            ghostClass: 'bg-blue-200',
        });

https://jsfiddle.net/mateuszbialowas/ds5bfj7v/27/

Answer 1

你可以试试这个 div 方法。

<div class="table" id="draggableDivTable">
  <div class="column">
    <div class="columnHeader">column 0</div>
    <div class="columnCell"> c0 r0</div>
    <div class="columnCell"> c0 r1</div>
    <div class="columnCell"> c0 r2 </div>
    <div class="columnCell"> c0 r3 </div>
    <div class="columnCell"> c0 r4 </div>
    <div class="columnCell"> c0 r5 </div>
  </div>
  <div class="column">
    <div class="columnHeader">column 1</div>
    <div class="columnCell"> c1 r0</div>
    <div class="columnCell"> c1 r1</div>
    <div class="columnCell"> c1 r2 </div>
    <div class="columnCell"> c1 r3 </div>
    <div class="columnCell"> c1 r4 </div>
    <div class="columnCell"> c1 r5 </div>
  </div>
  <div class="column">
    <div class="columnHeader">column 2</div>
    <div class="columnCell"> c2 r0</div>
    <div class="columnCell"> c2 r1</div>
    <div class="columnCell"> c2 r2 </div>
    <div class="columnCell"> c2 r3 </div>
    <div class="columnCell"> c2 r4 </div>
    <div class="columnCell"> c2 r5 </div>
  </div>
</div>

Sortable.create(document.getElementById('draggableDivTable'), {
    sort: true,
    handle: '.columnHeader',
    animation: 150
});

https://codepen.io/jlapinski/pen/ZXYERN