vue项目弹窗实现拖拽功能

项目场景：

项目中我自己div画的弹窗需要能拖动。

---

解决方案：

主要功能代码

//通过div的class，获取当前div标签弹窗
let el = document.getElementsByClassName("measureClass")[0];
this.dragDialog(el);

// 弹窗拖拽功能
    dragDialog(el) {
      el.onmousedown = (e) => {
        //鼠标按下，计算鼠标触点距离元素左侧的距离
        let disX = e.clientX - el.offsetLeft;
        let disY = e.clientY - el.offsetTop;
        document.onmousemove = function (e) {
          //计算需要移动的距离
          let t = e.clientX - disX;
          let P = e.clientY - disY;
          //移动当前元素
          if (t >= 0 && t <= window.innerWidth - el.offsetWidth) {
            el.style.left = t + "px";
          }
          //移动当前元素
          if (P >= 0 && P <= window.innerHeight - el.offsetHeight) {
            el.style.top = P + "px";
          }
        };
        //鼠标松开时，注销鼠标事件，停止元素拖拽。
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },