H5 页面拖动悬浮按钮

  <div class="main-plus" :style="{ bottom: (clientHeight * 5/100) + '%'}" ref="dragBox" @click="goItem" @touchstart="touchstartHandle('dragBox',$event)" @touchmove="touchmoveHandle('dragBox',$event)" @touchend="touchendHandle('dragBox',$event)">
    <van-icon name="http://chuantu.xyz/t6/742/1672300762x2890317095.png"  @click="delPhnoe" size="30"/>
  </div>

   goItem() {
      this.$emit('goEtone')
    },
    touchstartHandle(refName, e) {
      let element = e.targetTouches[0]
      // 记录点击的坐标
      this.coordinate.client = {
        x: element.clientX,
        y: element.clientY
      }
      // 记录需要移动的元素坐标
      this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
      this.coordinate.elePosition.top = this.$refs[refName].offsetTop
    },
    touchmoveHandle(refName, e) {
      e.returnValue = false;
      let element = e.targetTouches[0]
      // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
      let x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
      let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
      // 限制可移动距离，不超出可视区域
      x = x <= 0 ? 0 : x >= innerWidth - this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
      y = y <= 0 ? 0 : y >= innerHeight - this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
      // 移动当前元素
      this.$refs[refName].style.left = x + 'px'
      this.$refs[refName].style.top = y + 'px'
      e.returnValue = true;
    },
    touchendHandle(refName, e) {
      let element = e.changedTouches[0]
      let scree = document.body.clientWidth / 2
      let _clientX = element.clientX

      if (_clientX < scree) {
        this.$refs[refName].style.left = 10 + 'px'
      } else {
        this.$refs[refName].style.left = 8.3 + 'rem'
      }
    }

.main-plus {
  width: 1rem;
  height: 1rem;
  position: fixed;
  z-index: 10;
  bottom: 5rem;
  right: 0.2rem;
  border-radius: 50%;
  /*background-color: #5080FF;*/
  color: #fff;
  line-height: 1rem;
  text-align: center;
  font-size: 0.45rem;
}