可移动的按钮

html

  <div
    class="btnDiv"
    ref="moveBtn"
    @mousedown="down()"
    @touchstart="down()"
    @mousemove="move()"
    @touchmove="move()"
    @mouseup="end()"
    @touchend="end()"
    @touchcancel="end()"
  >
    <!-- 按钮 -->
    <img  @click="Fun()" class="img" src="@/assets/images/add.png" alt>
  </div>

js

export default {
  props: ['type'],
  data() {
    return {
      flags: false,
      position: {
        x: 0,
        y: 0
      },
      nx: '',
      ny: '',
      dx: '',
      dy: '',
      xPum: '',
      yPum: '',
      isShow: false,
      moveBtn: {},
      // 类型
      flag: ''
    }
  },
  watch: {},
  mounted() {
    this.moveBtn = this.$refs.moveBtn
  },
  methods: {
    // 确定按钮
    okFun() {
      this.$emit('okFun')
    },
    // 按下
    down() {
      this.flags = true
      var touch
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      this.position.x = touch.clientX
      this.position.y = touch.clientY
      this.dx = this.moveBtn.offsetLeft
      this.dy = this.moveBtn.offsetTop
    },
    // 移动
    move() {
      if (this.flags) {
        var 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
        var clientWidth = document.documentElement.clientWidth
        var clientHeight = document.documentElement.clientHeight
        if (
          this.xPum > 0 &&
          this.xPum < clientWidth - this.moveBtn.offsetWidth
        ) {
          this.moveBtn.style.left = this.xPum + 'px'
        }
        if (
          this.yPum > 0 &&
          this.yPum < clientHeight - this.moveBtn.offsetHeight
        ) {
          this.moveBtn.style.top = this.yPum + 'px'
        }
        //阻止页面的滑动默认事件
        document.addEventListener('touchmove', this.handler, {
          passive: false
        })
      }
    },
    //释放时候的函数
    end() {
      this.flags = false
      document.addEventListener('touchmove', this.handler, {
        passive: false
      })
    },
    // 添加按钮
    addFun() {
      this.$emit('addFun')
    },
    // 阻止页面的滑动默认事件
    handler() {
      if (this.flags) {
        event.preventDefault()
      } else {
        return true
      }
    }
  }
}

css

.btnDiv{
  height: 4.75rem;
  width: 4.75rem;
  position: fixed;
  top: 100vw;
  left: 80vw;
  z-index: 99999;
}

.btnDiv img {
  height: 13vw;
  width: 13vw;
}