vue 自定义移动函数

首先在要移动的div上添加v-drage

<div class="tool" v-drag></div>

然后在vue实例里面跟method添加如下代码：

directives: {
    drag(el, bindings) {
      el.onmousedown = function(e) {
      // 这个是移动的范围元素
        var parent = document.getElementById("main");
        // 计算移动元素最大可移动的left、top,限制其移除框外
        var maxLeft = parent.offsetWidth - el.offsetWidth;
        var maxTop = parent.offsetHeight - el.offsetHeight;
        if (e.target == el) {
        // 计算移动元素需要减去的部分，60是我的限制框距离body的最左边的宽度，e.offsetX是鼠标点击的位置距离移动元素左边框的距离
          var disx = 60 + e.offsetX;
          var disy = 40 + e.offsetY;
          document.onmousemove = function(e) {
            if (e.clientX - disx < 0) {
              el.style.left = 0;
            } else if (e.clientX - disx > 0 && e.clientX - disx < maxLeft) {
              el.style.left = e.clientX - disx + "px";
            } else {
              el.style.left = maxLeft + "px";
            }
            if (e.clientY - disy < 0) {
              el.style.top = 0;
            } else if (e.clientY - disy > 0 && e.clientY - disy < maxTop) {
              el.style.top = e.clientY - disy + "px";
            } else {
              el.style.top = maxTop + "px";
            }
          };
          document.onmouseup = function() {
            document.onmousemove = document.onmouseup = null;
          };
        }
      };
    }
  }

移动时可在mounted函数里面添加如下代码，防止移动选中文字

document.onselectstart = function() {
      return false;
    };