Sortable.js: Susun dan susun lajur dalam jadual

Question

Bagaimana untuk mengisih senarai menggunakan perpustakaan sortable.js? https://sortablejs.github.io/Sortable/

Saya menetapkan sortable_container(sortable_employees id) pada atribut tr. Ini berfungsi hebat. Tetapi bagaimana untuk mengisih td dalam tbody pada masa yang sama?

Sila lihat gif. Tbody tidak boleh disusun. Cara membuat jadual untuk menyeret dan menjatuhkan sel pengepala dan sel badan. Atau bagaimana saya boleh menyediakan sortable.js untuk melakukan ini untuk saya?

Semak kod sampel:

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

Anda boleh mencuba kaedah div ini.

  

    
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