自定义v-drag指令

Vue.directive('drag',{
  bind: function (el, binding) {
    let _this = el;  //获取当前元素
    //监听document是因为如果监听元素el的话鼠标太快移出元素后就会失效
    el.onmousedown = (event) => {
      //算出鼠标相对元素的位置
      let pointX = event.clientX - el.offsetLeft;//鼠标位置X减去元素距离左边距离（鼠标到元素左边的距离）
      let pointY = event.clientY - el.offsetTop;//鼠标位置Y减去距离顶部距离（鼠标到元素顶部的高度）
      let left, top
      document.onmousemove = (e)=>{
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        left = e.clientX - pointX;
        top = e.clientY - pointY;

        //移动当前元素
        el.style.left = left + 'px';
        el.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
        // v-drag="callback"；可以使用回调callback(options)获取参数
        if (binding) {
          binding.value({ id: el.id, top: _this.style.top, left: _this.style.left });
        }
      };
    };
  }
})