首页vue3中vuedraggable

vue3中vuedraggable

时间: 2025-02-11 08:20:16 浏览: 41

### Vue3 中使用 `vuedraggable` 插件实现拖拽功能 #### 安装依赖包为了在 Vue 3 项目中集成 `vuedraggable`，需要安装对应的 npm 包。推荐使用最新版的 `vuedraggable-next` 来兼容 Vue 3。 ```bash pnpm i -S vuedraggable@next ``` #### 导入并注册组件完成安装之后，在项目的入口文件或所需页面导入该模块： ```javascript import { Draggable } from 'vuedraggable'; // 或者 ES6 模块化方式 import draggable from "vuedraggable"; ``` 接着可以在单文件组件 (`.vue`) 文件内通过局部注册的方式引入此组件： ```html <script> export default { components: { draggable, }, }; </script> ``` #### 编写模板结构定义好数据源后，按照如下 HTML 结构编写模板部分来创建可拖动列表[^3]： ```html <draggable :list="dragList" item-key="id" ghost-class="_ghost" chosen-class="_chosenClass" animation="300"> <template #item="{ element }"> <div class="_drag-item">{{ element.name }}</div> </template> </draggable> ``` 这里的关键属性解释如下： - `:list`: 绑定的数据数组； - `item-key`: 数据项唯一标识字段名； - `ghost-class`, `chosen-class`: 自定义样式类名用于美化交互过程中的视觉反馈； - `animation`: 动画持续时间(ms)，使操作更加流畅自然； #### 初始化状态管理最后一步是在脚本标签内的 data 函数返回初始状态对象，提供给上述绑定表达式使用: ```javascript data() { return { dragList: [ { id: 1, name: 'Item A' }, { id: 2, name: 'Item B' }, { id: 3, name: 'Item C' } ] }; } ``` 这样就可以构建一个简单的基于 `vuedraggable` 的拖放排序列表了。

阅读全文