Vue通过自定义指令实现元素拖动（弹窗拖动）

        话不多说直接上代码！！！！

使用此自定义指令需要给弹窗的头部元素添加drag，class名，指明拖动那个元素会进行动态计算位置，*0.5是为了避免弹窗拖出可视区域。

import Vue from 'vue'
// v-dialogDrag: 弹窗拖拽
Vue.directive('drag', {
    bind: function (el,binding, vnode, oldVnode) {
      //使用此自定义指令需要给弹窗的头部元素添加drag，class名
        let oDiv = el.querySelector('.drag'); // 获取当前元素
        oDiv.style.cursor = 'move';
        oDiv.onmousedown = (e) => {
          // 算出鼠标相对元素的位置
          let disX = e.clientX - el.offsetLeft;
          let disY = e.clientY - el.offsetTop;
          console.log("本身的宽高", el.clientHeight, el.clientWidth);

          document.onmousemove = (e) => {
            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX;
            let top = e.clientY - disY;

            if (left <= 0) {
              left = 0;
            } else if (
              left >=
              document.documentElement.clientWidth -
                el.clientWidth +
                el.clientWidth*0.5
            ) {
              left =
                document.documentElement.clientWidth -
                el.clientWidth +
                el.clientWidth*0.5;
            }
            if (top <= 0) {
              top = 0;
            } else if (
              top >=
              document.documentElement.clientHeight -
                el.clientHeight +
                el.clientHeight*0.5
            ) {
              top =
                document.documentElement.clientHeight -
                el.clientHeight +
                el.clientHeight*0.5;
            }

            el.style.left = left + "px";
            el.style.top = top + "px";
          };

          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
})

在main.js中引入

import './utils/drag'

给对应想要拖动的元素添加v-drsg就可以了

使用此自定义指令需要给弹窗的头部元素添加drag，class名，