pc端可以拖拽的悬浮窗口demo

<template>
  <div
    class="floating-button"
    :style="{
      position: 'fixed',
      right: buttonStyle.right,
      top: buttonStyle.top,
      transform: buttonStyle.transform,
    }"
    @mousedown="startDrag"
    @click="gotoAI"
  >
    <img src="@/static/images/kefu1.png" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      buttonStyle: {
        position: "fixed",
        right: "2px",
        top: "400px",
        zIndex: 999,
      },
      dragging: false,
      initialX: 0,
      initialY: 0,
      offsetX: 0,
      offsetY: 0,
      messageDialog: false,
    };
  },
  methods: {
    gotoAI() {
      this.messageDialog = !this.messageDialog;
      this.$emit("gotoAI", this.messageDialog);
      // this.$router.push(`/message.html`);
    },
    startDrag(event) {
      console.log("-------startDrag------", event);
      event.preventDefault(); // 阻止默认行为
      this.dragging = true;
      // 记录初始触摸位置
      this.initialX = event.clientX;
      this.initialY = event.clientY;

      // 记录当前偏移量
      this.offsetX = parseInt(this.buttonStyle.right.slice(0, -2));
      this.offsetY = parseInt(this.buttonStyle.top.slice(0, -2));
      // 绑定mousemove和mouseup事件
      document.addEventListener("mousemove", this.onDrag);
      document.addEventListener("mouseup", this.endDrag);
    },
    onDrag(event) {
      console.log("-------onDrag------", event);
      event.preventDefault(); // 阻止默认行为
      if (this.dragging) {
        // 计算偏移量
        const deltaX = event.clientX - this.initialX;
        const deltaY = event.clientY - this.initialY;
        // 更新按钮位置
        this.buttonStyle.right = `${this.offsetX - deltaX}px`;
        this.buttonStyle.top = `${this.offsetY + deltaY}px`;
      }
    },
    endDrag(event) {
      event.preventDefault(); // 阻止事件的默认行为
      event.stopPropagation();
      this.dragging = false;
      document.removeEventListener("mousemove", this.onDrag);
      document.removeEventListener("mouseup", this.endDrag);
    },
  },
};
</script>
<style scoped>
.floating-button {
  width: 50px;
  height: fit-content;
  opacity: 0.9;
}

.floating-button img {
  width: 100%;
  height: auto;
  display: block;
}
</style>