基于vue的h5 拖拽组件（ 吸边处理）

(1)自定义一个公共组件drag.vue

<template>
  <div
    class="ball-page"
    ref="default_drag_comp"
    @click="goNext"
    @touchstart="down"
    @touchmove="move"
    @touchend="end"
  >
    <img :src="ball.icon" class="icon" />
    <div class="title">{{ ball.title }}</div>
  </div>
</template>
<script>
export default {
  name: 'Drag',
  props: {
    ball: Object
  },
  data: function() {
    return {
      flags: false,
      position: {
        x: 0,
        y: 0
      },
      nx: '',
      ny: '',
      xPum: '',
      yPum: ''
    };
  },
  created() {},
  methods: {
    goNext() {
      this.$emit('click');
    },
  }
};
</script>
<style lang="scss" scoped>
@function rem375($val) {
  @return $val/37.5 * 1rem;
}

.ball-page {
  background-color: #fff;
  box-shadow: 0 rem375(2) rem375(10) 0 rgba(55, 63, 82, 0.1);
  position: fixed;
  z-index: 999;
  width: rem375(70);
  height: rem375(70);
  border-radius: 50%;
  right: rem375(10);
  bottom: rem375(100);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  .icon {
    width: rem375(50);
    height: rem375(20);
  }

  .title {
    margin-top: rem375(4);
    font-size: rem375(12);
  }
}
</style>

(2)实现拖拽

// 实现拖拽
down(event) {
  const dragDiv = this.$refs.default_drag_comp;
  this.flags = true;
  let touch;
  if (event.touches) {
    touch = event.touches[0];
  } else {
    touch = event;
  }
  this.position.x = touch.clientX - dragDiv.offsetLeft;
  this.position.y = touch.clientY - dragDiv.offsetTop;
  // 光标起始位置  touch.clientX/touch.clientY;
  // 左偏移量 offsetLeft   上偏移量 offsetTop
},
move(event) {
 event.preventDefault();
 const dragDiv = this.$refs.default_drag_comp;
 if (this.flags) {
   let touch;
   if (event.touches) {
     touch = event.touches[0];
   } else {
     touch = event;
   }
   // 添加限制：只允许在屏幕内拖动
   // 页面宽高度减去悬浮框宽高
   // offsetWidth和offsetHeight对象自身的的宽度/高度
   this.maxW = document.documentElement.clientHeight - dragDiv.offsetWidth;
   // 页面高度
   this.maxH =
     document.documentElement.clientHeight - dragDiv.offsetHeight;
   // 屏幕高度
   // this.maxH = document.body.clientHeight - dragDiv.offsetHeight;
   // this.maxW = document.body.clientWidth - dragDiv.offsetWidth;

   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;
   }
   dragDiv.style.left = this.nx + 'px';
   dragDiv.style.top = this.ny + 'px';
   // 阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
   document.addEventListener(
     'touchmove',
     function() {
       // event.preventDefault();
     },
     false
   );
 }
},

(2)实现吸边

• 单边吸处理，左边/右边

// 鼠标释放时候的函数
end() {
  // 吸边处理
  this.flags = false;
  const dragDiv = this.$refs.default_drag_comp;
  // 右吸边
  dragDiv.style.left =
    document.documentElement.clientWidth -
    parseInt(dragDiv.clientWidth) +
    'px';
  // 左吸边
  // // default_drag_comp.style.left = "0px";
  dragDiv.style.top = dragDiv.offsetTop + 'px';
}

这个方法亲测有效，用于处理嵌入的h5页面，比如公众号等。