VueDraggablePlus 支持 Vue2 和 Vue3 的拖拽组件

### VueDraggablePlus 在 Vue 2 中的使用说明 VueDraggablePlus 是基于 Sortable.js 和 Vue.draggable 组件构建的一个增强版拖拽库，旨在提供更丰富的交互体验和支持更多场景的应用需求。为了更好地理解如何在 Vue 2 项目中集成并使用此插件，下面将详细介绍其安装配置过程以及一些基本用法。 #### 安装依赖包 对于 Vue 2.x 版本而言，建议通过 npm 来安装所需的软件包： ```bash $ npm install vuedraggableplus --save ``` 这一步骤确保了应用程序能够获取最新稳定版本的同时也便于后续维护升级工作[^1]。 #### 引入组件至项目内 完成上述操作之后，在需要使用的页面文件顶部引入 `VueDraggablePlus` 组件，并注册它以便可以在模板里调用: ```javascript // main.js 或者其他入口文件 import draggable from "vuedraggableplus"; Vue.component(&#39;draggable&#39;, draggable); ``` 如果仅限局部范围内应用，则可以直接在单个 `.vue` 文件内部声明导入方式如下所示： ```javascript <script> export default { components: { draggable: () => import("vuedraggableplus"), }, }; </script> ``` 以上两种方法都可以有效加载该组件资源，具体选择取决于实际开发习惯和个人偏好。 #### 创建简单的列表项拖动实例 接下来展示一段基础代码片段来实现一个可以自由调整顺序的任务清单效果： ```html <template> <div id="app"> <h3>待办事项:</h3> <!-- 使用 draggable 标签包裹住要被拖拽的目标元素 --> <draggable :list="items" @end="onEnd"> <transition-group type="transition" name="flip-list"> <div class="item" v-for="(element, index) in items" :key="index">{{ element.name }}</div> </transition-group> </draggable> <button @click="addItem">新增任务</button> </div> </template> <script> export default { data() { return { items: [ {name:&#39;吃饭&#39;}, {name:&#39;睡觉&#39;} ] } }, methods:{ addItem(){ this.items.push({name:`新任务${this.items.length + 1}`}); }, onEnd(event){ console.log(`位置交换发生在 ${event.oldIndex} -> ${event.newIndex}`); } } }; </script> <style scoped> .item{ padding:.5em; border-bottom:solid 1px #ccc; cursor:pointer; } .flip-list-move { transition: transform .5s ease-in-out; } </style> ``` 这段示例展示了怎样利用 `draggable` 属性绑定数据源数组 (`items`) 并监听结束事件 (`@end`) ，从而捕捉到每次重新排列后的变化情况；同时也加入了按钮点击增加条目的逻辑作为补充。