yjdp-web/src/directive/common/drag.ts

export default {
  mounted(el, binding) {
    const { draggable, scaleX = 1, scaleY = 1 } = binding.value;
    if (!draggable) {
      // 如果拖拽功能被禁用，则不执行任何拖拽相关的逻辑
      return;
    }

    el.style.position = 'absolute';
    el.style.cursor = 'move';

    const dragDom = el;

    let disX = 0; // 鼠标按下时，鼠标与拖拽元素的左边距
    let disY = 0; // 鼠标按下时，鼠标与拖拽元素的上边距

    dragDom.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      disX = e.clientX / scaleX - dragDom.offsetLeft;
      disY = e.clientY / scaleY - dragDom.offsetTop;

      // 鼠标移动事件
      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX / scaleX - disX;
        const t = e.clientY / scaleY - disY;
        // 移动当前元素
        dragDom.style.left = `${l + 'px'}`;
        dragDom.style.top = `${t + 'px'}`;

        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      };

      // 鼠标松开事件
      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }
};