vue拖动通过指令方式

  directives: {
    drag: {
      inserted(el, binding) {
        let oDiv = el;
        oDiv.onmousedown = function (e) {
          //  鼠标按下，计算当前元素距离可视区的距离
          let disX = e.clientX - oDiv.offsetLeft;
          let disY = e.clientY - oDiv.offsetTop;
          document.onmousemove = function (e) {
            //  获取到鼠标拖拽后的横向位移(距离父级元素)
            let l = e.clientX - disX;
            //  获取到鼠标拖拽后的纵向位移(距离父级元素)
            let t = e.clientY - disY;

            oDiv.style.left = l + "px";

            oDiv.style.top = t + "px";

            if (e.clientX - disX <= 0) {
              oDiv.style.left = 0 + "px";
            }

            if (e.clientY - disY <= 0) {
              oDiv.style.top = 0 + "px";
            }
            //     将此时的位置传出去
            binding.value({
              id: oDiv.id,
              left: oDiv.style.left,
              top: oDiv.style.top,
            });
          };
          //     松开事件后，移除事件
          document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },

  <div style="width:400px;height:400px;position:relative;background:pink;">
    <div v-drag="greet" id="001"
      style="width:100px;height:100px;background:gray;position:absolute;left:0;top:0;">
      <div>第一行</div>
      <div>第二行</div>
    </div>
    <div v-drag="greet" id="002"
      style="width:100px;height:100px;background:gray;position:absolute;left:120px;top:0;">
      <div>2-第一行</div>
      <div>2-第二行</div>
    </div>
    <!-- <input v-focus> -->
  </div>

    greet(obj) {
      console.log(obj);
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        console.log("setTimeout");
        if (this.positionInfor.length == 0) {
          console.log("等于0");
          this.positionInfor.push(obj);
        } else {
          for (let i = 0; i < this.positionInfor.length; i++) {
            if (this.positionInfor[i].id == obj.id) {
              this.positionInfor.splice(i,1,obj)
              return;
            }
            if (i == this.positionInfor.length - 1) {
              this.positionInfor.push(obj);
            }
          }
        }
      }, 300);
    },