Sortable.js: Spalten in einer Tabelle organisieren und sortieren

Question

Wie sortiere ich eine Liste mithilfe der sortable.js-Bibliothek? https://sortablejs.github.io/Sortable/

Ich habe sortable_container(sortable_employes id) auf das tr-Attribut gesetzt. Das funktioniert großartig. Aber wie kann man td gleichzeitig im tbody sortieren?

Bitte sehen Sie sich das GIF an. Der Körper ist nicht sortierbar. So erstellen Sie eine Tabelle zum Ziehen und Ablegen von Kopf- und Körperzellen. Oder wie kann ich sortable.js so einrichten, dass es das für mich erledigt?

Überprüfen Sie den Beispielcode:

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