Vue移动框鼠标拖拽自定义指令

在Vue中通过自定义指令，实现指定的模块带有鼠标拖拽移动效果

// 移动框自定指令
Vue.directive("drag", {
  bind: (el) => {
    let initX = null;
    let initY = null;
    el.style.cursor = "move";//设置鼠标样式为移动
    // 创建一个div作为移动选择框
    let divHtml = document.createElement('div')
    divHtml.style.cssText = "width: 90%;height: 40px;position: absolute;top: 0;left: 0;z-index: 100000;";
    el.appendChild(divHtml)
    // 获取初始点击的位置
    el.addEventListener("mousedown", function (e) {
      let curX = 0;
      let curY = 0;
      let str = el.style.transform.trim();
      if (str) {
        let reg = /\-?\d+/g;
        curX = Number(reg.exec(str));
        curY = Number(reg.exec(str));
      }
      initX = e.pageX - curX;
      initY = e.pageY - curY;
      // 鼠标移动事件设置移动位置
      document.addEventListener("mousemove", moveEle);
    });
    // 设置当前位置
    function moveEle(e) {
      el.style.transform = `translate(${e.pageX - initX}px,${e.pageY - initY}px)`;
    }
    // 鼠标松开移出方法
    document.addEventListener("mouseup", function () {
      document.removeEventListener("mousemove", moveEle);
    });
  },
  // 指令销毁
  unbind: (el) => {
    el.style.transform = "";
  },
});

使用

在new Vue之前定义该指令，使用时在模块中使用v-drag指令即可