文章参考:
https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag
https://jsbin.com/wopavom/edit?html,css,js,console
亲测好用
import { Sortable, MultiDrag } from 'sortablejs'
setSort() {
Sortable.mount(new MultiDrag());
const tbody = document.querySelector(".table tbody");
new Sortable(tbody, {
animation: 150,
filter: '.sort-filtered',
multiDrag: true,
selectedClass: "sortable-selected",
multiDragKey: 'shift',
avoidImplicitDeselect: false,
onEnd: (evt) => {
let { oldIndicies, newIndicies, newIndex, oldIndex } = { ...evt };
if (oldIndicies.length > 0) {
//多行拖动排序
let targetRowList = [];
oldIndicies.forEach(item => {
let data = this.DataList[item.index];
targetRowList.push(data);
});
this.DataList.splice(oldIndicies[0].index, oldIndicies.length);
this.DataList.splice(newIndicies[0].index, 0, ...targetRowList);
} else {
//单行拖动排序
const targetRow = this.DataList[oldIndex];
this.DataList.splice(oldIndex, 1);
this.DataList.splice(newIndex, 0, targetRow);
}
evt.items.forEach(item => {
//拖动结束后移除selected样式
item.classList.remove('sortable-selected');
})
},
});
}