vue實現拖拽小圖標

<div
      class="xuanfu"
      id="moveDiv"
      @mousedown="down()"
      @touchstart="down()"
      @mousemove.prevent.stop="move()"
      @touchmove.prevent.stop="move()"
      @mouseup="end()"
      @touchend="end()"
    >
      <img class="img-kf" src="../../assets/images/csVip/kf.png" />
</div>

position: { x: 0, y: 0 },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",

//移動端拖拽事件
    down() {
      this.flags = true;
      let touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      this.position.x = touch.clientX;
      this.position.y = touch.clientY;
      this.dx = moveDiv.offsetLeft;
      this.dy = moveDiv.offsetTop;
    },
    move() {
      if (this.flags) {
        let touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        this.nx = touch.clientX - this.position.x;
        this.ny = touch.clientY - this.position.y;
        this.xPum = this.dx + this.nx;
        this.yPum = this.dy + this.ny;
        //添加限制：隻允許在屏幕內拖動

        //屏幕寬度減去懸浮框寬高
        const maxWidth = document.body.clientWidth - 54;
        const maxHeight = document.body.clientHeight - 54;
        if (this.xPum < 0) {
          //屏幕x限制
          this.xPum = 0;
        } else if (this.xPum > maxWidth) {
          this.xPum = maxWidth;
        }
        if (this.yPum < 0) {
          //屏幕y限制
          this.yPum = 0;
        } else if (this.yPum > maxHeight) {
          this.yPum = maxHeight;
        }
        moveDiv.style.left = this.xPum + "px";
        moveDiv.style.top = this.yPum + "px";
        //阻止頁面的滑動默認事件
        document.addEventListener(
          "touchmove",
          function () {
            // 1.2 如果碰到滑動問題，請註意是否獲取到 touchmove
            // event.preventDefault(); //jq 阻止冒泡事件
            event.stopPropagation(); // 如果沒有引入jq 就用 stopPropagation()
          },
          false
        );
      }
    },
    //鼠標釋放時候的函數
    end() {
      this.flags = false;
    },

.xuanfu {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    // background: rgb(213, 91, 91);
    position: fixed;

    bottom: 4rem;
    right: 0.4rem;
    z-index: 9999999999;
    text-align: center;

    .img-kf {
      width: 1.7rem;
      height: 1.7rem;
    }
  }