按钮拖拽（限制Y轴 可视区域内）

<div
      class="case__build"
      @touchstart="down($event, 'toTop')"
      @touchmove.prevent="move($event, 'toTop')"
      @touchend="end"
      @click="build"
      id="toTop"
    >
    </div>

data(){

      flags: false, // 按钮启用拖拽状态

      position: { x: 0, y: 0 }, // 拖拽位置

   }

// 实现新建按钮拖拽
    down(event, id) {
      this.flags = true;
      let touch;
      const moveDiv = document.getElementById(id);
      if (event.touches) {
        touch = event.touches[0];
      } else {
        return;
      }
      if (!moveDiv) {
        return;
      }
      this.position.x = moveDiv.offsetLeft - touch.clientX;
      this.position.y = moveDiv.offsetTop - touch.clientY;
    },

    move(event, id) {
      if (this.flags) {
        let touch;
        const moveDiv = document.getElementById(id);
        if (event.touches) {
          touch = event.touches[0];
        } else {
          return;
        }
        if (!moveDiv) {
          return;
        }

        // 只让y方向拖动，限于屏幕内
        // const nx = this.position.x + touch.clientX;
        let ny = this.position.x + touch.clientY;
        // moveDiv.style.left = nx + 'px';

        if(ny < 0) {
          ny = 0
        };

        if(ny > (window.screen.height - 150)) {
          ny = window.screen.height - 150
        }

        moveDiv.style.top = ny + 'px';
        //阻止页面的滑动默认事件
        document.addEventListener(
          'touchmove',
          function() {
            event.preventDefault();
          },
          { passive: false },
        );
      }
    },

    //鼠标释放时候的函数
    end() {
      this.flags = false;
    }

  .case__build {
    width: 0.8rem;
    height: 0.8rem;
    position: fixed;
    bottom: 0.63rem;
    right: 0.05rem;
    background: url("@{icons}/build-icon.png") no-repeat center center;
    background-size: 0.8rem auto;
  }