vue h5项目页面滑块实现

vue h5项目页面滑块实现
1.template部分

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- 浮窗 -->
    <div id="webId">
      <div
        class="xuanfu"
        ref="moveDiv"
        @mousedown="down()"
        @touchstart="down()"
        @mousemove="move()"
        @touchmove="move()"
        @mouseup="end()"
        @touchend="end()"
      ></div>
    </div>
  </div>
</template>

2.script部分

<script>
export default {
  data() {
    return {
      flags: false,
      position: { x: 0, y: 0 },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",
    };
  },
  methods: {
    // 实现移动端拖拽
    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 = this.$refs.moveDiv.offsetLeft;
      this.dy = this.$refs.moveDiv.offsetTop;
    },
    move() {
      this.$refs.moveDiv.style.transitionDuration = "0s";
      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.documentElement.clientWidth - 80; //屏幕宽度减去悬浮框宽
        const maxHeight = document.documentElement.clientHeight - 180; //屏幕高度减去悬浮框高
        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;
        }
        this.$refs.moveDiv.style.left = this.xPum + "px";
        this.$refs.moveDiv.style.top = this.yPum + "px";
        //阻止页面的滑动默认事件
        document.addEventListener(
          "touchmove",
          function () {
            event.stopPropagation();
          },
          false
        );
      }
    },
    // 鼠标释放时候的函数
    end() {
      // console.log("释放");
      this.flags = false;
      // 获取屏幕的可视宽高
      let seeWidth = document.documentElement.clientWidth;
      // let seeHeight = document.documentElement.clientHeight;
      // console.log("seeWidth", seeWidth);
      // console.log("seeHeight", seeHeight);
      // 获取当前div距屏幕上面和左边的距离
      // console.log(this.$refs.moveDiv.offsetTop);
      // console.log(this.$refs.moveDiv.offsetLeft);
      // 可视屏幕宽度的1/2
      let halfwidth = seeWidth / 2;
      if (this.$refs.moveDiv.offsetLeft + 40 >= halfwidth) {
        this.$refs.moveDiv.style.left = seeWidth - 105 + "px";
        this.$refs.moveDiv.style.transitionDuration = "0.5s";
      } else {
        this.$refs.moveDiv.style.left = 25 + "px";
        this.$refs.moveDiv.style.transitionDuration = "0.5s";
      }
    },
  },
};
</script>

3.style部分

<style lang="less" scoped>
/*css样式可自定义 仅提供参考*/
#webId {
  position: relative;
}
.xuanfu {
  height: 80px; /* rem = 12px */
  width: 80px;
  z-index: 900;
  position: fixed;
  top: 500px;
  right: 25px;
  background-image: url("../assets/618.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  touch-action: none;
}
</style>