标签：vue yPum 拖拽 小图标 rem touch position event xPum

如何给vue项目里面写拖拽悬浮小图标呢

首先
1、html文件 一定要给父盒子一个ID

 <div
      class="xuanfu"
      id="moveDiv"
      @mousedown="down()"
      @touchstart="down()"
      @mousemove.prevent.stop="move()"
      @touchmove.prevent.stop="move()"
      @mouseup="end()"
      @touchend="end()"
    >
      <img class="img-kf" src="../../assets/images/csVip/kf.png" />
    </div>

2、在data里面设置

 position: { x: 0, y: 0 },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",

3、在方法里面写拖拽方法

  //  　移动端拖拽事件
    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 = moveDiv.offsetLeft;
      this.dy = moveDiv.offsetTop;
    },
    move() {
      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.body.clientWidth - 54;
        const maxHeight = document.body.clientHeight - 54;
        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;
        }
        moveDiv.style.left = this.xPum + "px";
        moveDiv.style.top = this.yPum + "px";
        //阻止页面的滑动默认事件
        document.addEventListener(
          "touchmove",
          function () {
            // 1.2 如果碰到滑动问题，请注意是否获取到 touchmove
            // event.preventDefault(); //jq 阻止冒泡事件
            event.stopPropagation(); // 如果没有引入jq 就用 stopPropagation()
          },
          false
        );
      }
    },
    //鼠标释放时候的函数
    end() {
      this.flags = false;
    },

4、css样式

 .xuanfu {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    // background: rgb(213, 91, 91);
    position: fixed;

    bottom: 4rem;
    right: 0.4rem;
    z-index: 9999999999;
    text-align: center;

    .img-kf {
      width: 1.7rem;
      height: 1.7rem;
    }
  }

到这里，我们的悬浮小图标就做完了！！！！

标签：vue,yPum,拖拽,小图标,rem,touch,position,event,xPum
来源： https://blog.csdn.net/weixin_47592687/article/details/116057269

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。