js 拖拽元素 鼠标速度过快问题

自己写一个小工具，使用js拖拽元素时，鼠标速度过快时 元素跟不上鼠标

看网上有人说把mousemove事件绑定到dom上 试了不管用

偶然发现拖拽文字丝毫无卡顿  不知道是不是元素比较复杂的缘故？

so 换个思路 需要拖拽元素时 不直接拖拽它 创建一个新元素 画出来边框 ，可以无卡顿拖拽。 拖拽完成后拿到这个临时元素的位置，将本体放过来即可 

话不多说 上代码

html

<el-button @mousedown.native="beginMove" size="mini">按钮</el-button>
<div
      id="innerHtml"
      @mousemove="moveControl"
      @mouseup="endMove"
></div>

JS

data() {
    //这里存放数据
    return {
      leftShow: true,
      is_move: false,
      tempElement: null,
      createElement: null
    };
},
methods: {
    /**
     * 开始拖拽
     * */
    beginMove(e) {
      this.is_move = true;
      //隐藏页面上其他元素
      this.leftShow = false;
      //clone一个新元素出来 此为本体
      this.createElement = e.target.cloneNode(true);
      // 创建一个临时元素
      this.tempElement = document.createElement("div");
      this.tempElement.style.position = "absolute";
      // 给它设置一个边框
      this.tempElement.style.border = "1px dashed #fc6";
      this.tempElement.style.width = e.target.offsetWidth + "px";
      this.tempElement.style.height = e.target.offsetHeight + "px";
      document.getElementById("innerHtml").append(this.tempElement);
    },
    /**
     * 拖拽过程
     * */
    moveControl(e) {
      if (this.is_move) {
        this.tempElement.style.top =
          e.clientY - this.tempElement.offsetHeight / 2 + "px";
        this.tempElement.style.left =
          e.clientX - this.tempElement.offsetWidth / 2 + "px";
      }
    },
    /**
     * 拖拽完成
     * @param e
     */
    endMove(e) {
      this.is_move = false;
      this.leftShow = true;
      //设置本体的属性
      this.createElement.style.position = "absolute";
      //将临时元素的位置取到本体
      this.createElement.style.top = this.tempElement.style.top;
      this.createElement.style.left = this.tempElement.style.left;
      document.getElementById("innerHtml").append(this.createElement);
      //移除临时元素
      this.tempElement.remove();
      this.tempElement = null;
    }
  }

效果图