<template>
  <div
    ref="moveBtn"
    @mousedown="down"
    @touchstart="down"
    @mousemove="move"
    @touchmove="move"
    @mouseup="end"
    @touchend="end"
    @touchcancel="end"
    class="back-home"
  >
    <div @click="back" class="back">
      <div>
        <img src="@/assets/imgs/right.png" alt />
      </div>
      <div>返回</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flags: false,
      position: {
        x: 0,
        y: 0
      },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",
      isShow: false,
      moveBtn: {}
    };
  },

  mounted() {
    this.moveBtn = this.$refs.moveBtn;
    console.log();
    // this.moveBtn.offsetLeft =
    this.moveBtn.style.left = 80 + "vw";
    this.moveBtn.style.top = 80 + "vh";
  },
  methods: {
    // 实现移动端拖拽
    down() {
      this.flags = true;
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      console.log(touch);

      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
      });
    },
    handler(e) {
      if (this.flags) {
        event.preventDefault();
      } else {
        return true;
      }
    },
    back() {
      this.$router.back();
    }
  }
};
</script>

<style lang='less' scoped>
.back-home {
  position: fixed;
  //   left: 100%;
  //   right: 100%;
  //   right: 10px;
  //   margin-top: 60%;
  //   margin-left: 80vw;
  z-index: 99999;
}

.back {
  width: 55px;
  height: 55px;
  text-align: center;
  border-radius: 50%;
  box-shadow: #666 0px 0px 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  img {
    width: 16px;
  }
  div {
    font-size: 13px;
    color: #f4c324;
  }
}
</style>

Lifelong learning lifelong benefit