h5实现悬浮图标支持随意拖拽并点击跳转

白柚Y

已于 2023-08-22 14:49:42 修改

阅读量508

点赞数 1

文章标签： javascript 前端开发语言

于 2023-08-16 09:51:52 首次发布

本文链接：https://blog.csdn.net/m0_67084957/article/details/132312759

版权


<script>

export default {

  data() {

    return {

      gapWidth: 10,

      itemWidth: 68, // 图标的宽度

      itemHeight: 68, // 图标的高度

      clientWidth: '',

      clientHeight: '',

      left: '',

      top: ''

    }

  },

  created() {

    this.clientWidth = document.documentElement.clientWidth;

    this.clientHeight = document.documentElement.clientHeight;

    this.left = this.clientWidth - this.itemWidth - this.gapWidth;

    this.top = this.clientHeight * 0.6;

  },



  methods: {

    dragStart() {



      this.$refs.div.style.transition = 'none';

    },

    dragEnd() {

      this.$refs.div.style.transition = 'all 0.3s';

      // if (this.left > this.clientWidth / 2) {

      //   this.left = this.clientWidth - this.itemWidth - this.gapWidth;

      // }else {

      //   this.left = this.gapWidth;

      // }

      if (this.left < this.gapWidth) {

        this.left = this.gapWidth

      } else if (this.left > this.clientWidth - 68) {

        this.left = this.clientWidth - this.itemWidth - this.gapWidth;

      }

      if (this.top < 0) {

        this.top = this.gapWidth;

      } else if (this.top > this.clientHeight - 128) {

        this.top = this.clientHeight - 128

      }

      console.log('left', this.left, this.clientWidth - 68);

    },

    dragProgress(e) {

      e.preventDefault();

      if (e.targetTouches.length === 1) {

        let touch = e.targetTouches[0];

        this.left = touch.clientX - this.itemWidth / 2;

        this.top = touch.clientY - this.itemHeight / 2;

      }

    },

    handleBackToHome() {

      this.$router.push('/')

    },

  }

}

</script>



<style lang="less" scoped>

.back_to_home {

  width: 0.68rem;

  height: 0.68rem;

  position: fixed;

  right: 0.1rem;

  bottom: 3.8rem;

  // top: 5.6rem;

  text-align: center;

  border-radius: 50%;

  background-image: url("../../../assets/images//back_to_homePage.png");

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

}



.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;

}

</style>

<template>

  <div

    ref="div"

    :style="{

      left: left + 'px',

      top: top + 'px',

    }"

    class="ys-float-btn back_to_home"

    @touchstart="

      (e) => {

        dragStart(e);

      }

    "

    @touchend="

      (e) => {

        dragEnd(e);

      }

    "

    @touchmove="

      (e) => {

        dragProgress(e);

      }

    "

    @click.stop="handleBackToHome"

  ></div>

</template>