Sortable.js: Organize and sort columns in a table
P粉752290033
P粉752290033 2024-02-03 17:40:31
0
1
422

How to sort a list using the sortable.js library? https://sortablejs.github.io/Sortable/

I set sortable_container(sortable_employees id) on the tr attribute. This works great. But how to sort td in tbody at the same time?

Please see gif. Tbody is not sortable. How to create a table to drag and drop header cells and body cells. Or how can I set up sortable.js to do this for me?

Check the sample code:

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

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

P粉752290033
P粉752290033

reply all(1)
P粉745412116

You can try this div method.

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!