Vue实现可拖动悬浮球的代码,首先需要满足悬浮球可以在整个屏幕被拖动,其次需要防止滚动屏幕导致悬浮球的抖动,并且悬浮球可以吸附到屏幕边缘,当吸附到屏幕边缘时隐藏一半的悬浮球

以下是实现可拖动悬浮球的Vue代码示例，其中使用了Vue指令和事件监听来实现：

<template>
  <div class="floating-ball"
       v-draggable
       v-resizable
       :class="{ 'adhering': adhering }"
       :style="{ 'top': posY + 'px', 'left': posX + 'px' }"
       @mousedown="startDrag($event)"
       @mousemove="dragging($event)"
       @mouseup="endDrag()"
       @mouseleave="endDrag()"
       @touchstart="startDrag($event)"
       @touchmove="dragging($event)"
       @touchend="endDrag()">
    <div class="inner-ball"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posX: 0,
      posY: 0,
      adhering: false,
      screenWidth: 0,
      screenHeight: 0,
      ballDiameter: 50,
      halfBallDiameter: 25,
      adherenceDistance: 20,
      dragStartX: 0,
      dragStartY: 0,
      isDragging: false
    };
  },
  mounted() {
    this.screenWidth = window.innerWidth;
    this.screenHeight = window.innerHeight;

    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  directives: {
    draggable: {
      inserted: function(el) {
        el.style.position = 'fixed';
      }
    },
    resizable: {
      inserted: function(el, binding) {
        el.style.width = binding.value + 'px';
        el.style.height = binding.value + 'px';
      }
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;

      if (e.type === 'touchstart') {
        this.dragStartX = e.touches[0].clientX;
        this.dragStartY = e.touches[0].clientY;
      } else {
        this.dragStartX = e.clientX;
        this.dragStartY = e.clientY;
      }
    },
    dragging(e) {
      if (!this.isDragging) {
        return;
      }

      let diffX, diffY;

      if (e.type === 'touchmove') {
        diffX = e.touches[0].clientX - this.dragStartX;
        diffY = e.touches[0].clientY - this.dragStartY;
      } else {
        diffX = e.clientX - this.dragStartX;
        diffY = e.clientY - this.dragStartY;
      }

      this.posX += diffX;
      this.posY += diffY;

      this.dragStartX = e.clientX;
      this.dragStartY = e.clientY;
    },
    endDrag() {
      this.isDragging = false;
      this.adhereToScreenEdge();
    },
    handleScroll() {
      if (this.adhering) {
        this.adhereToScreenEdge();
      }
    },
    adhereToScreenEdge() {
      const leftDistance = this.posX;
      const topDistance = this.posY;
      const rightDistance = this.screenWidth - this.ballDiameter - this.posX;
      const bottomDistance = this.screenHeight - this.ballDiameter - this.posY;

      let adhering = false;

      if (leftDistance < this.adherenceDistance) {
        this.posX = -this.halfBallDiameter;
        adhering = true;
      }
      if (rightDistance < this.adherenceDistance) {
        this.posX = this.screenWidth - this.halfBallDiameter;
        adhering = true;
      }
      if (topDistance < this.adherenceDistance) {
        this.posY = -this.halfBallDiameter;
        adhering = true;
      }
      if (bottomDistance < this.adherenceDistance) {
        this.posY = this.screenHeight - this.halfBallDiameter;
        adhering = true;
      }

      this.adhering = adhering;
    }
  }
};
</script>

<style>
.floating-ball {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #2196F3;
  cursor: move;
}

.inner-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #fff;
}

.adhering {
  opacity: 0.5;
}
</style>

在上面的代码中，我们使用了Vue指令`v-draggable`和`v-resizable`来使悬浮球可拖动和可调整大小。通过监听鼠标或触摸事件，我们可以在悬浮球被拖动时更新其位置。为了防止滚动屏幕导致悬浮球抖动，我们也监听了窗口滚动事件，并在事件触发时重新计算悬浮球位置。

为了使悬浮球可以吸附到屏幕边缘，我们定义了`adhereToScreenEdge`方法来计算悬浮球与屏幕边缘的距离，并在距离足够小的情况下将悬浮球位置设置为屏幕边缘。当悬浮球吸附到屏幕边缘时，我们使用CSS样式`opacity`将其透明度设置为0.5，并隐藏一半的悬浮球。