Vue自定义指令之拖拽

PC端：全局拖拽指令

//在main.js中添加如下代码：
Vue.directive('drag', { // 全局拖拽指令
  bind: function (el, binding, vnode) {
    let oDiv = el;
    let self = vnode.context;
    oDiv.onmousedown = (e) => {
      let disX = e.clientX - oDiv.offsetLeft;
      let disY = e.clientY - oDiv.offsetTop;
      document.onmousemove = (e) => {
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        if (!left && !top) {
          oDiv.style.left = self.currentLeft;
          oDiv.style.top = self.currentTop;
        } else {
          oDiv.style.left = left + "px";
          oDiv.style.top = top + "px";
        }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
})

使用时在需要拖拽的元素上添加 v-drag 指令即可使用
注意点：此元素必须添加 position 定位

//使用示例
 <div v-drag style="position: absolute;right: 100px;top: 100px;z-index: 999;width: 100px;height: 100px;background: red;">拖拽drag</div>

以上