Sortable.js：將表格中的欄位進行組織和排序

Question

如何使用 sortable.js 函式庫對清單進行排序？ https://sortablejs.github.io/Sortable/

我在 tr 屬性上設定了 sortable_container(sortable_emploees id) 。這很好用。但如何同時對tbody中的td進行排序呢？

請看gif。 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 方法。

  

    
column 0
    
 c0 r0
    
 c0 r1
    
 c0 r2 
    
 c0 r3 
    
 c0 r4 
    
 c0 r5 
  
  

    
column 1
    
 c1 r0
    
 c1 r1
    
 c1 r2 
    
 c1 r3 
    
 c1 r4 
    
 c1 r5 
  
  

    
column 2
    
 c2 r0
    
 c2 r1
    
 c2 r2 
    
 c2 r3 
    
 c2 r4 
    
 c2 r5 
  


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

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