vue 自定义窗口拖拽

vue 自定义窗口拖拽

创建div窗口，给一定的有效高度和宽度：

在methods方法中定义一个拖拽函数：

// An highlighted block
//窗口拖动
    move(e) {
      // console.log(e)
      //获取目标div元素
      let odiv = e.target; 
      //算出鼠标相对元素的位置
      let mouseX = e.clientX - odiv.offsetLeft;
      let mouseY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e) => {
        //用鼠标的位置减去鼠标相对元素的位置，得到元素div的位置
        let fromLeft = e.clientX - mouseX;
        let fromTop = e.clientY - mouseY;
        //移动当前元素，改变拖拽后的距离
        odiv.style.left = fromLeft + "px";
        odiv.style.top = fromTop + "px";
      };
      //鼠标离开清空
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },