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",
        },
        // 鼠标移入
        onm ouseenter: (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）