forked from drone/command-center-dashboard

罗广辉
2025-04-02 e1699c4851f6ca397cd0ad1ff63f32c737654836
src/directive/drag.js
@@ -1,18 +1,17 @@
const drag = {
  mounted(el, binding) {
    const dragBox = document.querySelector('#' + binding.arg)
    //鼠标点击距离box盒子left的距离
    let spotToBoxLeft = 0
    let spotToBoxTop = 0
    const mouseupFun = (e) => {
      const mouseupFun = e => {
      window.removeEventListener('mousemove', mousemoveFun)
      window.removeEventListener('mouseup', mouseupFun)
    }
    const mousemoveFun = (evt) => {
      console.log(66666);
      const mousemoveFun = evt => {
         console.log(66666)
      //获取body宽高,获取拖动盒子的宽高
      const {offsetWidth: bodyWidth, offsetHeight: bodyHeight} = document.body
      const {offsetWidth: boxWidth, offsetHeight: boxHeight} = dragBox
@@ -23,18 +22,18 @@
      dragBox.style.top = Math.min(top, bodyHeight - boxHeight) + 'px'
    }
    el.__mousedownFun = (evt) => {
      el.__mousedownFun = evt => {
      //鼠标坐标减去 box盒子相对于父盒子body 的距离
      spotToBoxLeft = evt.clientX - dragBox.offsetLeft
      spotToBoxTop = evt.clientY - dragBox.offsetTop
      window.addEventListener('mousemove', mousemoveFun)
      window.addEventListener('mouseup', mouseupFun)
    }
    el.addEventListener('mousedown', el.__mousedownFun);
      el.addEventListener('mousedown', el.__mousedownFun)
  },
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding,) {
   beforeUnmount(el, binding) {
    el.removeEventListener('mousedown', el.__mousedownFun)
  },
}