页面悬浮按钮可拖动实现（vue和js写法）

需求：

1. 每个页面都能自动加上悬浮按钮

2. 可拖拽

3. 点击返回首页

效果图：

方式一：js原生写法：

    
    
    Document


    
            let div = document.createElement('div');
            let clientWidth = document.documentElement.clientWidth	// 获取手机的像素宽度
            let clientHeight = document.documentElement.clientHeight// 获取手机的像素高度
            div.style.boxShadow = '0px 0px 0px 0.5em #e0e1e9' ;
            div.style.width = "24px";
            div.style.height = "24px";
            div.style.left = clientWidth - 50+'px';
            console.log("初始位置left"+div.style.left)
            div.style.top = clientHeight * 0.6+'px';
            div.style.zIndex = '100000';
            div.style.position= 'fixed';
            div.style.background = 'red';
            
            div.style.transition='all 0.3s';
            div.style.bottom='436px';
            div.style.right= 0;
            div.style.margin='5px 10px';
            div.style.background='rgb(197 203 211)'
            div.style.borderRadius = '15px';
            document.body.appendChild(div);
            var divattr = document.createAttribute("id");
            divattr.value = "float_info";
            //把属性id = "float_info"添加到div
            div.setAttributeNode(divattr);
            let flag = 0; //标记是拖曳还是点击
            var oDiv = document.getElementById('float_info');
            oDiv.style.display = 'block'; // 显示元素
            oDiv.addEventListener("touchstart", () => {
                flag = 0;
                oDiv.style.transition = 'none'
            })
    
            // 在拖拽的过程中，按钮应该跟随鼠标的移动而移动。
            oDiv.addEventListener("touchmove", (e) => {
                flag=1
                console.log('移动中', e)
                if (e.targetTouches.length === 1) {  // 一根手指 
                    e.preventDefault();// 阻止默认的滚动行为
                    div.style.left = e.targetTouches[0].clientX-20 +'px'//clientX：触摸目标在视口中的x坐标。
                    div.style.top = e.targetTouches[0].clientY -25 +'px'//clientY：触摸目标在视口中的y坐标。
                    console.log('移动中',  div.style.left)
                }
            }) 
        
            // 拖拽结束以后，重新调整按钮的位置并重新设置过度动画。
            oDiv.addEventListener("touchend", () => {
                // 如果是点击跳转到首页
                if(flag==0){
                    that.$router.push({
                        path: "/workspaces/views/index/index",
                    });
                }else {
                    div.style.transition = 'all 0.3s'
                    console.log('拖拽结束后left', div.style.left)
                    console.log('拖拽结束后top', div.style.top)
                    if ( parseInt(div.style.left)> (document.documentElement.clientWidth / 2)) {
                    div.style.left = document.documentElement.clientWidth -50+'px';
                    } else {
                        div.style.left = 0+'px'
                    }
                    // 控制其超出屏幕回到原始位置
                    if ( parseInt(div.style.top)> (document.documentElement.clientHeight)|| parseInt(div.style.top)
  
    
      返回首页
    
  
 {
        this.handleScrollEnd()
      }, 300)
      this.currentTop = document.documentElement.scrollTop || document.body.scrollTop
      if (this.left > this.clientWidth / 2) {
        this.left = this.clientWidth - this.itemWidth / 2
      } else {
        this.left = -this.itemWidth / 2
      }
    },
    handleScrollEnd() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop === this.currentTop) {
        if (this.left > this.clientWidth / 2) {
          this.left = this.clientWidth - this.itemWidth - this.gapWidth
        } else {
          this.left = this.gapWidth
        }
        clearTimeout(this.timer)
      }
    },
  
  },
  mounted() {
    this.$nextTick(() => {
      const floatButton = this.$refs.floatButton
      floatButton.addEventListener("touchstart", () => {
        floatButton.style.transition = 'none'
      })
 
      // 在拖拽的过程中，组件应该跟随手指的移动而移动。
      floatButton.addEventListener("touchmove", (e) => {
        // console.log('移动中', e)
        if (e.targetTouches.length === 1) {         // 一根手指
         document.body.addEventListener('touchmove', this.bodyScroll, { passive: false });  //禁止页面滑动
          let touch = e.targetTouches[0]
          this.left = touch.clientX - 20
          this.top = touch.clientY - 25
        }
 
      })
 
      // 拖拽结束以后，重新调整组件的位置并重新设置过度动画。
      floatButton.addEventListener("touchend", () => {
        floatButton.style.transition = 'all 0.3s'
        console.log('拖拽结束后left', this.left)
        document.body.removeEventListener('touchmove', this.bodyScroll, { passive: false });  //解除页面禁止滑动
        if (this.left > document.documentElement.clientWidth / 2) {
          this.left = document.documentElement.clientWidth - this.itemWidth - 20;
 
        } else {
          this.left = 0
        }
      })
    })
  },
  beforeDestroy() {
    // 添加监听页面滚动
    window.removeEventListener('scroll', this.handleScrollStart)
  },
  destroyed() { }
}


.float_button {
  .float_info {
    box-shadow: #1666ca;
    transition: all 0.3s;
    position: fixed;
    bottom: 436px;
    right: 0;
    margin: 5px 10px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    z-index: 999;
    background: #1666ca;
    background-color: rgba(22, 102, 202, 0.6);
    border-radius: 10px;
    cursor: pointer;
    .text {
      font-size: 12px;
      color: #fff;
    }
  }
}

2.然后在main.js中注册全局组件（这里大家根据自己的实际路径替换）

import FloatingButton from '@/workspaces/tools/FloatingButton.vue';
Vue.component('FloatingButton', FloatingButton)

3.最后在需要这个悬浮按钮的页面模板中用这个组件就可以了