vue-draggable-resizable多个拖拽

### 使用 `vue-draggable-resizable` 实现多元素拖拽 为了实现在单个页面上多个可拖拽和可调整大小的元素，可以利用 `vue-draggable-resizable` 组件。此组件允许创建能够被用户移动以及改变尺寸的对象[^1]。 #### 安装依赖库 首先确保安装了必要的包： ```bash yarn add [email protected] ``` 或者使用 npm: ```bash npm install --save [email protected] ``` #### 创建Vue实例并注册组件 接着，在项目中定义一个新的 Vue 应用程序，并导入所需的组件： ```javascript import Vue from 'vue'; import VueDraggableResizable from 'vue-draggable-resizable'; // 注册全局组件 Vue.component('vue-draggable-resizable', VueDraggableResizable); new Vue({ el: '#app', }); ``` #### HTML模板结构 在HTML文件里设置好容器来容纳这些动态生成的小部件： ```html <div id="app"> <!-- 循环渲染多个 draggable resizable --> <div v-for="(item, index) in items" :key="index" style="position:relative;"> <vue-draggable-resizable :w="item.width" :h="item.height" :x="item.xPos" :y="item.yPos" @resizing="onResize(index)" @dragging="onMove(index)"> {{ item.text }} </vue-draggable-resizable> </div> </div> ``` 这里展示了如何遍历一个数组 (`items`) 来显示不同位置上的多个 `<vue-draggable-resizable>` 元素。每个元素都有自己的宽高(`width`, `height`) 和坐标 (`xPos`, `yPos`) 属性[^3]。 #### JavaScript逻辑处理函数 最后一步是在JavaScript部分编写事件处理器方法，以便当用户操作某个特定项时更新其状态数据： ```javascript data() { return { items: [ { text: 'Item One', width: 200, height: 150, xPos: 0, yPos: 0 }, { text: 'Item Two', width: 180, height: 120, xPos: 250, yPos: 0 } // 更多项... ] }; }, methods: { onResize(idx, x, y, width, height){ this.items[idx].width = width; this.items[idx].height = height; }, onMove(idx, x, y){ this.items[idx].xPos = x; this.items[idx].yPos = y; } } ``` 上述代码片段说明了怎样监听来自各个独立组件的变化通知，并相应地修改对应的数据条目[^4]。 通过这种方式就可以轻松实现具有多种交互特性的多元素拖拽布局效果了。