xjc-vue/src/views/xjc-integratedmachine/components/drag_component.vue

<template>
  <div class="fixed-box">
    <div class="content-bottom">
      <div
        class="draw draggable"
        ref="draggableRef"
        :style="{ top: position.y - 360 + 'px', left: position.x + 'px' }"
      >
        <img src="@/assets/images/wakeup/float-box.png" />
      </div>
      <div class="ai-rabit">
        <img src="@/assets/images/wakeup/ai-rabit.png" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const draggableRef = ref(null);
const position = ref({ x: 0, y: 0 });
const dragging = ref(false);
const startX = ref(0);
const startY = ref(0);

const onMouseDown = (event) => {
  dragging.value = true;
  startX.value = event.clientX - position.value.x;
  startY.value = event.clientY - position.value.y;
  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
};

const onTouchStart = (event) => {
  if (event.touches.length === 1) {
    dragging.value = true;
    startX.value = event.touches[0].clientX - position.value.x;
    startY.value = event.touches[0].clientY - position.value.y;
    document.addEventListener("touchmove", onTouchMove, { passive: true });
    document.addEventListener("touchend", onTouchEnd, { passive: true });
  }
};

const onMouseMove = (event) => {
  if (dragging.value) {
    position.value.x = event.clientX - startX.value;
    position.value.y = event.clientY - startY.value;
  }
};

const onTouchMove = (event) => {
  if (dragging.value && event.touches.length === 1) {
    position.value.x = event.touches[0].clientX - startX.value;
    position.value.y = event.touches[0].clientY - startY.value;
  }
};

const onMouseUp = () => {
  dragging.value = false;
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
};

const onTouchEnd = () => {
  dragging.value = false;
  document.removeEventListener("touchmove", onTouchMove);
  document.removeEventListener("touchend", onTouchEnd);
};

onMounted(() => {
  const draggable = draggableRef.value;
  draggable.addEventListener("mousedown", onMouseDown);
  draggable.addEventListener("touchstart", onTouchStart, { passive: true });
});

onUnmounted(() => {
  const draggable = draggableRef.value;
  if (draggable) {
    draggable.removeEventListener("mousedown", onMouseDown);
    draggable.removeEventListener("touchstart", onTouchStart);
  }
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
  document.removeEventListener("touchmove", onTouchMove);
  document.removeEventListener("touchend", onTouchEnd);
});
</script>

<style scoped lang="scss">
.draggable {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  cursor: pointer;
  user-select: none;
}

.fixed-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none; /* 让背景不阻挡其他元素的点击 */
  z-index: 9999; /* 确保在最上层显示 */
}

.content-bottom {
  width: 100%;
  height: 0px; /* 给容器一个明确的高度 */
  display: flex;
  justify-content: space-between;
  position: relative;
  align-items: flex-end;
  pointer-events: auto; /* 恢复子元素的点击事件 */

  .draw {
    width: 109px;
    height: 170px;
    pointer-events: auto;
    position: absolute;

    img {
      width: 109px;
      height: 170px;
    }
  }

  .ai-rabit {
    position: absolute;
    right: 0px;
    bottom: 0px;
    display: flex;
    align-items: flex-end;
    pointer-events: auto;

    .ai-rabit-text {
      width: 345px;
      height: 89px;
      background: #e8eef7;
      font-weight: 300;
      margin-bottom: 20px;
      font-size: 22px;
      color: #000000;
      padding: 16px;
      border-radius: 24px 24px 24px 24px;
    }

    img {
      width: 178px;
      height: 270px;
    }
  }
}
</style>