vue3 自定义指令 元素随鼠标移动

import type { Directive } from "vue"
const drag: Directive = {
  mounted(el: HTMLElement) {
    function reset() {
        el.style.boxShadow = "none"
        el.style.cursor = "auto"
        document.onmousemove = document.onmouseup = null;
        document.getSelection && document.getSelection()!.removeAllRanges()
     
    }

    el.style.setProperty("--x", "0")
    el.style.setProperty("--y", "0")
    el.style.transform = `translate(calc(var(--x) * 1px),calc(var(--y) * 1px))`
    el.onmousedown = function (e) {
      el.style.boxShadow = `0px 2px 5px #5d5a5a`
      el.style.cursor = "move"
      //  记录原始偏移值 以及 鼠标按下时坐标
      let x = e.pageX
      let y = e.pageY
      let ox = Number(el.style.getPropertyValue("--x") || 0)
      let oy = Number(el.style.getPropertyValue("--y") || 0)
      document.onmousemove = function (e) {
        let maxX = (el.parentNode as HTMLDivElement)!.offsetWidth - el.offsetWidth;
        let maxY = (el.parentNode as HTMLDivElement)!.offsetHeight - el.offsetHeight;
        let nx = ox + (e.pageX - x)
        let ny = oy + (e.pageY - y)
         if (nx < 0) {
          nx = 0;
        } else if (nx > maxX) {
          nx = maxX;
        }
        if (ny < 0) {
          ny = 0;
        } else if (ny > maxY) {
          ny = maxY;
        }
         el.style.setProperty("--x", String(nx))
         el.style.setProperty("--y", String(ny))
        // el.style.transform = `translate(${String(nx)}px,${String(ny)}px)`
      }
      document.onmouseup =reset
    }
  },
}

export default drag

1.使用transform:translate做位移

2.使用鼠标事件pageX，pageY计算位置

3.暂未发现bug或问题  ，如有发现，欢迎指正