拖拽组件vuedraggable

本文介绍了如何在Vue应用中使用vuedraggable组件实现拖拽功能,并强调了管理事件、克隆数据的重要性,以及如何通过`lodash.cloneDeep`确保数据一致性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

具体业务流程为:点击管理按钮->拖拽->保存即调接口保存修改

安装此包

 引入注册

dList为Draggable(拖拽组件)绑定数据:

list为渲染视图数据:

list数据格式:

须知:拖拽不能直接对list进行修改,例如如果修改后不保存的话就会丢失原数据,所以需要lodash的cloneDeep来进行深度克隆

 1:管理按钮事件(dList赋值)

 

 2.移动块的时候 组件绑定的值会改变(如下图)

 

 3.保存设置

 vuedraggable实现组件拖拽,页面生成器? - 掘金

### 使用 VueDraggable 实现拖拽功能 VueDraggable 是基于 Sortable.js 的 Vue 组件,用于创建可拖动列表和其他交互式元素。通过简单的配置和事件监听器,可以在 Vue 应用程序中轻松集成拖拽功能。 #### 基础使用方法 为了在 Vue 项目中使用 `vuedraggable`,首先需要安装该库: ```bash npm install vuedraggable --save ``` 接着,在组件中引入并注册 `draggable` 组件: ```javascript import { Draggable } from 'vuedraggable'; export default { components: { draggable: Draggable, }, }; ``` 定义数据模型来存储待拖拽项,并将其绑定至 `v-model` 属性上。下面是一个完整的例子展示如何构建一个基本的可拖拽列表[^3]: ```html <template> <div> <!-- 可拖拽区域 --> <draggable v-model="list" class="list-group" group="people" @start="dragging = true" @end="dragging = false"> <transition-group type="transition" name="flip-list"> <div v-for="(element, index) in list" :key="element.id" class="list-group-item"> {{ element.name }} </div> </transition-group> </draggable> <!-- 显示当前状态 --> <p>Dragging state is: {{ dragging }}</p> </div> </template> <script> // 导入必要的模块... export default { data() { return { list: [ { id: 1, name: 'John' }, { id: 2, name: 'Joao' }, { id: 3, name: 'Jean' } ], dragging: false }; } } </script> <style scoped> /* 添加一些样式 */ .list-group { min-height: 20px; } .flip-list-move { transition: transform 0.5s; } .no-transition { transition: none !important; } </style> ``` 此代码片段展示了如何利用 `vuedraggable` 创建一个支持内部重排顺序的简单列表。当用户开始或结束拖拽操作时会触发相应的钩子函数 (`@start`, `@end`) 来更新界面显示的状态信息。 对于更复杂的场景,比如跨容器之间的拖拽,则可以通过设置相同的分组名称(`group`)属性让不同容器内的元素能够互相交换位置;如果希望自定义拖拽行为(如改变默认外观),还可以借助于 `forceFallback` 参数强制回退到 JavaScript 模拟方式而非依赖浏览器内置的支持[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值