vue3中实现div在父元素中可自由拖动、可以调整宽度和高度

在 Vue3 中实现 div 的自由拖动和大小调整功能，通常需要结合 `Vue.js` 的响应式特性以及一些前端库，比如 `Vue-Draggable` 或者 `vue-touch`. 这里我们简单地介绍一下基本思路：

1. **安装依赖**：
首先，你需要安装 `vue-draggable` 库，可以使用 npm 或 yarn 安装：

   npm install vue-draggable2
   # 或者
   yarn add vue-draggable2

2. **组件导入并使用**：
在你的组件文件中，引入 `Draggable` 组件，并将其应用到需要拖动的 div 元素上：

   <template>
     <draggable v-model="items" :options="{ group: 'group', constraints: [parentElement] }">
       <div class="draggable-item" v-for="(item, index) in items" :key="index">
         <!-- 根据需求添加样式和内容 -->
         <div :style="{ width: item.width + 'px', height: item.height + 'px' }">{{ item.content }}</div>
       </div>
     </draggable>
   </template>

   <script>
   import draggable from 'vue-draggable2'

   export default {
     components: { draggable },
     data() {
       return {
         items: [
           { content: 'Item 1', width: 100, height: 100 },
           // 更多项...
         ],
         parentElement: document.getElementById('parent'), // 父元素ID
       }
     },
   }
   </script>

在这里，`:options` 属性用于设置 Draggable 的选项，`v-model` 指定绑定的数据数组，每个项表示一个可以被拖动的 div。

3. **事件监听和处理**：
Draggable 提供了一些事件，如 `start`, `end`, `update` 等，你可以根据需要在对应的 `methods` 中处理这些事件，例如更新数据模型来反映新的宽高值。

4. **样式和约束**：
可能还需要调整 `.draggable-item` 的样式以及使用 `constraints` 选项限制 div 在父元素内的拖动范围。