Vue3 拖拽调整子组件大小和位置

<template>
  <div class='container' @mousemove='onMouseMove' @mouseup='onMouseUp'>
    <div class='box' :style='boxStyle' @mousedown='onMouseDown'></div>
  </div>
</template>
<script>
import { ref } from 'vue';

export default {
  setup() {
    const isDragging = ref(false);
    const prevX = ref(0);
    const prevY = ref(0);
    const offsetX = ref(0);
    const offsetY = ref(0);
    const boxStyle = ref({
      width: '100px',
      height: '100px',
      position: 'absolute',
      top: '50px',
      left: '50px',
      backgroundColor: 'red',
    });

    const onMouseDown = (event) => {
      event.preventDefault();
      isDragging.value = true;
      prevX.value = event.clientX;
      prevY.value = event.clientY;
    };

    const onMouseMove = (event) => {
      event.preventDefault();
      if (isDragging.value) {
        offsetX.value = event.clientX - prevX.value;
        offsetY.value = event.clientY - prevY.value;
        prevX.value = event.clientX;
        prevY.value = event.clientY;
        boxStyle.value.top = `${parseFloat(boxStyle.value.top) + offsetY.value}px`;
        boxStyle.value.left = `${parseFloat(boxStyle.value.left) + offsetX.value}px`;
      }
    };

    const onMouseUp = () => {
      isDragging.value = false;
    };

    return {
      isDragging,
      prevX,
      prevY,
      offsetX,
      offsetY,
      boxStyle,
      onMouseDown,
      onMouseMove,
      onMouseUp,
    };
  },
};
</script>
<style>
.container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

.box {
  cursor: move;
}
</style>
<p>在这个示例代码中，我们创建了一个容器和一个红色的方块。当我们在方块上按下鼠标左键后，就可以拖动方块，使其在指定区域内移动。拖动方块的同时，我们还可以动态修改方块的宽度和高度，实现了在指定区域内使用鼠标拖拽对子组件的长宽和位置进行调整的功能。</p>