vue3+antd+jsx 实现表格行数据排序的动画效果
------------恢复内容开始------------
vue3的写法
转载https://blog.csdn.net/qq_51898604/article/details/128973430
因为ant-design表格组件没有封装拖拽排序的方法，需要通过customRow这个属性进行自定义排序。
因为项目的原因所以使用的是typescript
<a-table :customRow="customRow" :columns="columns" :data-source="dataSource">
........
</a-table>
ts代码
// 位置记录
const position = {
start: undefined as number | undefined,
end: undefined as number | undefined,
sourceEl: undefined as undefined | HTMLTableRowElement,
}
// 排序
const reorder = ({ start, end }) => {
if (start !== undefined && end !== undefined) {
if (start > end) {
// 当开始大于结束
let temp = dataSource.value[start]
dataSource.value.splice(start, 1);
dataSource.value.splice(end, 0, temp)
} else if (start < end) {
// 结束大于开始
let temp = dataSource.value[start]
dataSource.value.splice(start, 1)
dataSource.value.splice(end + 1, 0, temp)
}
let arr: string[] = dataSource.value?.map((item: any) => item.id)
emit("onDeviceList", arr)
}
}
function customRow(_record, index) {
return {
style: {
cursor: "move",
},
// 鼠标移入
onMouseenter: (event) => {
// 兼容IE
let ev = event || window.event;
ev.target.draggable = true;
},
// 开始拖拽
onDragstart: (event) => {
// 兼容IE
let ev = event || window.event;
// 阻止冒泡
ev.stopPropagation();
// 得到源目标数据;
position.start = index
const tr = ev.target as HTMLTableRowElement
position.sourceEl = tr
},
// 拖动元素经过的元素
onDragover: (event) => {
let ev = event || window.event;
// 阻止默认行为
ev.preventDefault();
},
// 松开
onDrop: (event) => {
let ev = event || window.event;
// 阻止默认行为
ev.preventDefault();
position.end = index
reorder(position);
animation(position)
},
};
}
// 实现动画效果
function animation({ start, end, sourceEl }) {
// 48 是每行的高度，也可以自动获取，根据情况而定
let count = 48 * (start! - end!)
sourceEl.style.translate = `0px ${count}px`
setTimeout(() => {
sourceEl!.style.transition = "all 0.5s"
sourceEl!.style.translate = `0px 0px`
})
}
另一个方案
https://blog.csdn.net/lhz_333/article/details/122347795
问题本质
1.拖拽的本质
a.鼠标移入元素，给元素的一个可拖拽的属性。ev.target.draggable
b.鼠标离开元素时，让ev.target.draggable 为false
2.过渡的本质
a.弄清transition和animation的区别,此时选择transtion
b.确定元素，起始位置坐标
c.使用css的过渡,要明白3t的不同概念。3t（transition，transform，translate）
原生js实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>11111111111111111111111111111111111111111111</li>
<li>22222222222222222222222222222222222222222222</li>
<li class="move">3333333333333333333333333333333333333333333333</li>
<li class="move2">444444444444444444444444444444444444444444444</li>
<li>155555555555555555555555555555555555555555555555</li>
</ul>
<button id="btn">点击</button>
<button id="btn2">点击2</button>
<style>
ul{width: 500px;margin: 0 auto;}
li{height: 50px;background-color: #92f9f6;margin:5px 0px}
li.move{background-color: red;transition: all 0.3s;z-index: 100;}
li.move2{transition: all 0.3s;}
</style>
<script>
document.getElementById("btn").addEventListener('click',(e)=>{
// console.log('点击时的',e.target.style)
let move=document.getElementsByClassName('move')[0]
let move2=document.getElementsByClassName('move2')[0]
move.style.translate='0px 55px'
move2.style.translate='0px -55px'
})
document.getElementById("btn2").addEventListener('click',(e)=>{
// console.log('点击时的',e.target.style)
let move=document.getElementsByClassName('move')[0]
let move2=document.getElementsByClassName('move2')[0]
move.style.translate='0px 0px'
move2.style.translate='0px 0px'
})
</script>
</body>
</html>
响应式实现
估计要重置translate的值
