移动端实现按钮在屏幕上拖拽

<!-- 拖拽滑动 -->
<template>
  <div id="default_drag_comp" v-show="activeBtnShow"
    @click="goNext"
    @touchstart="down"
    @touchmove="move"
    @touchend="end"
  >
   <img src="../../src/assets/image/home_click.png" alt="" @click="gotoActivity">
    <img src="../../src/assets/image/drag.png" alt="" @click="close">
  </div>
</template>

<script>
var jsbridge = require("../../src/util/jsbridge.js");
export default {
  name: "defaultDrag",
  props:{
    btnShow:true
  },
  data() {
    return {
      flags: false,
      position: { x: 0, y: 0 },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",
      activeBtnShow:this.btnShow,
     
    };
  },
  activated(){
   
    this.activeBtnShow = this.btnShow
  },
  methods: {
    gotoActive(){
// H5上直接跳转
     window.location.href = 'https://new.3tlife.cn/contents/2/5981.html'
     
 // 用于混合app中的原生跳转

    },
    goNext() {
      this.$emit("goNext");
    },
    close(){
      this.activeBtnShow =false
    },
    // 实现移动端拖拽
    down(event) {
      let default_drag_comp = document.querySelector("#default_drag_comp");
      this.flags = true;
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      this.maxW = document.documentElement.clientWidth - default_drag_comp.offsetWidth;
      this.maxH = document.documentElement.clientHeight - default_drag_comp.offsetHeight;

      this.position.x = touch.clientX - default_drag_comp.offsetLeft;
      this.position.y = touch.clientY - default_drag_comp.offsetTop;
      this.dx = touch.clientX;
      this.dy = touch.clientY;
    },
    move(event) {
      event.preventDefault();
      let default_drag_comp = document.querySelector("#default_drag_comp");
      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;

         if (this.nx < 0) {
           this.nx = 0;
         } else if (this.nx > this.maxW) {
           this.nx = this.maxW;
         }

        if (this.ny < 0) {
          this.ny = 0;
        } else if (this.ny >= this.maxH) {
          this.ny = this.maxH;
        }
        // console.log(this.ny,'ny',this.maxH,'maxH')
        // console.log(document.documentElement.clientWidth,'H') 
         default_drag_comp.style.left = this.nx + "px";
        default_drag_comp.style.top = this.ny + "px";
        //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
        document.addEventListener(
          "touchmove",
          function() {
            // event.preventDefault();
          },
          false
        );
      }
    },
    //鼠标释放时候的函数
    end() {
      this.flags = false;
    }
  }
};
</script>
<style scoped lang="scss">
#default_drag_comp {
  width: 0.75rem;
  height: 1rem;
  position: fixed;
  z-index: 1000;
  bottom: 1.6rem;
  right: 0.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img:first-child {
    width:100%;
    height: 0.75rem;
    border-radius: 50%;
  }
  img:last-child {
    width:0.15rem;
    height: 0.15rem;
    margin-top: 0.1rem;
  }
}
</style>