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 + '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, {passive: true});
  document.removeEventListener('touchend', onTouchEnd, {passive: true});
};

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

// onUnmounted(() => {
//   const draggable = draggableRef.value;
//   draggable.removeEventListener('mousedown', onMouseDown);
//   draggable.removeEventListener('touchstart', onTouchStart, {passive: true});
//   document.removeEventListener('mousemove', onMouseMove);
//   document.removeEventListener('mouseup', onMouseUp);
//   document.removeEventListener('touchmove', onTouchMove, {passive: true});
//   document.removeEventListener('touchend', onTouchEnd, {passive: true});
// });

</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{
  width: 100%;
  height: 100px;
  position: absolute;
  //bottom: 0px;
  top: 678px;
}
.content-bottom{
  width: 100%;
  height: 270px;
  display: flex;
  justify-content: space-between;
  position: relative;
  align-items: center;
  .draw{
    width: 109px;
    height: 170px;
    img{
      width: 109px;
      height: 170px;
    }
  }

  .ai-rabit{
    position: absolute;
    right: 0px;
    bottom: 20px;
    display: flex;
    align-items: center;
    .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;
    }
  }
}
.draggable-ball {
  position: absolute;
  cursor: pointer;
  user-select: none; /* 防止拖拽时选中文字 */
}
</style>