VUE面板拖动

在网上查了查，多多少少总有些问题，就自己写了一个。话不多说，上代码。

分为两种拖动方法：

一、点击事件拖动

<div class="processpanel" @mousedown="mousedown">

mousedown(e0) {
      debugger;
      var p = document.getElementsByClassName("processpanel");
      //鼠标按下时面板左上角的位置
      var pl = p[0].offsetLeft;
      var pt = p[0].offsetTop;
      document.onmousemove = function (e1) {
              document.documentElement.style.cursor = "move";//鼠标变成十字架
        //鼠标移动的距离
        var l = e0.clientX - e1.clientX;
        var t = e0.clientY - e1.clientY;
        //防止鼠标点击与拖拽冲突
        var d = Math.sqrt(l * l + t * t);
        if (d > 7) {
          p[0].style.left = pl - l + "px";
          p[0].style.top = pt - t + "px";
        } else {
          p[0].style.left = p[0].offsetLeft;
          p[0].style.top = p[0].offsetTop;
        }
      }.bind(this);
      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
        document.documentElement.style.cursor = "";//恢复鼠标样式
      };
    },

二、指令拖动

<div class="processpanel" v-drag>

// 指令
  directives: {
    //拖拽指令
    drag(p) {
      p.onmousedown = function (e0) {
        //鼠标按下时面板左上角的位置
        var pl = p.offsetLeft;
        var pt = p.offsetTop;
        document.onmousemove = function (e1) {
          document.documentElement.style.cursor = "move";
          //鼠标移动的距离
          var l = e0.clientX - e1.clientX;
          var t = e0.clientY - e1.clientY;
          //防止鼠标点击与拖拽冲突
          var d = Math.sqrt(l * l + t * t);
          if (d > 7) {
            p.style.left = pl - l + "px";
            p.style.top = pt - t + "px";
          } else {
            p.style.left = p.offsetLeft;
            p.style.top = p.offsetTop;
          }
        }.bind(this);
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
          document.documentElement.style.cursor = "";
        };
      };
    },
  },