data 源数据
changeOne //表格拖拽初始下标
changeTwo //表格拖拽结束下标
//排序拖拽方法
const customRow = (record: any, index: any) => {
console.log("=====触发拖拽====", record)
return {
style: {
cursor: 'pointer',
},
// 鼠标移入
onMouseenter: (event) => {
// 兼容IE
var ev = event || window.event;
ev.target.draggable = true; // 让你要拖动的行可以拖动,默认不可以
},
// 开始拖拽
onDragstart: (event) => {
console.log("=====拖拽的点击事件====", event)
// 兼容IE
var ev = event || window.event;
// 阻止冒泡
ev.stopPropagation();
// 得到源目标数据序号
changeOne.value = index;
},
// 拖动元素经过的元素
onDragover: (event) => {
// 兼容 IE
var ev = event || window.event;
// 阻止默认行为
ev.preventDefault();
},
// 鼠标松开
onDrop: (event) => {
// 兼容IE
var ev = event || window.event;
let data = dataSource.value
// console.log(dataSource);
// 阻止冒泡
ev.stopPropagation();
// 得到目标数据序号
changeTwo.value = index;
// 这里就是让数据位置互换,让视图更新 你们可以看record,index的输出,看是什么
[data [changeOne.value], data [changeTwo.value]] = [
data [changeTwo.value],
data [changeOne.value],
];
dataSource.value = data ;
},
};
};