Vue中实现鼠标按住元素进行拖动

// Drag the element with the mouse position after clicking
/**
 * elementDrag
 * @param e 鼠标事件
 * @param element 需要拖动的元素
 * @param fn 需要执行的事件
 */
export default function elementDrag(
  eleEvent: MouseEvent,
  element: HTMLElement,
  fn: () => void
) {
  if (element) {
  	// 计算偏移量
    let x = 0,
      y = 0;
    // 点击时鼠标位置
    const diffX = eleEvent.clientX;
    const onMouseMove = (event: MouseEvent) => {
      // 相对一开始的偏移量
      x = event.clientX - diffX;
      y = event.clientY;
      if (element) {
        // 修改元素样式，通过position,left,top实现跟随鼠标位置
        element.style.position = "fixed";
        element.style.zIndex = "10";
        element.style.left = `${x}px`;
        element.style.top = `${y}px`;
      }
    };

    const onMouseUp = () => {
      if (element) {
        // 元素样式复原
        element.style.position = "";
        element.style.zIndex = "0";
        element.style.left = `0px`;
        element.style.top = `0px`;
        element.style.cursor = "cursor";
      }
      // 清除绑定事件   
      window.removeEventListener("mousemove", onMouseMove);
      window.removeEventListener("mouseup", onMouseUp);
      // 判断执行事件的条件，此处是在鼠标反向滑动距离大于元素一半宽度时执行
      if (x < -Math.floor(element.offsetWidth / 2)) {
        // 执行传入的事件
        fn();
      }
    };
    // 将事件绑定到窗口事件
    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("mouseup", onMouseUp);
  }
}