拖拽组件vuedraggable

已于 2022-08-15 09:12:53 修改
阅读量497 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 vuedraggable 文章标签： javascript 前端 开发语言
于 2022-07-18 19:51:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/FF_XM/article/details/125856291
本文介绍了如何在Vue应用中使用vuedraggable组件实现拖拽功能，并强调了管理事件、克隆数据的重要性，以及如何通过`lodash.cloneDeep`确保数据一致性。

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

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

安装此包

 引入注册

dList为Draggable（拖拽组件）绑定数据:

list为渲染视图数据:

list数据格式:

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

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

 

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

 

 3.保存设置

 vuedraggable实现组件拖拽，页面生成器？ - 掘金

python vuedraggable_vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
weixin_42522676的博客
01-13 557
vue拖拽克隆clone组件API， vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档)效果图：--------------------------------------------------------------------------------首先需要安装vuedraggable依赖包：npm install vuedraggable --save因为拖拽组件...
VueDraggable实现组件内部拖拽、跨组件拖拽功能
weixin_45850417的博客
10-30 2306
1 功能 2 方案要点 3 实现中的踩的坑 4 代码
Jquery可拖拽布局组件
06-13
Jquery Portal布局组件，可以进行拖拽、关闭、展开、收缩等操作，并可以自定义比例，按比例进行布局。是在基于别人基础上做了一些修改，支持主流浏览器，并且支持IE8、IE9、IE10等。
公用拖拽功能插件
weixin_30680385的博客
07-15 90
(function($){ var defaults = { // 是否可拖拽默认为true enable : true, // 要拖动的对象，默认为handle的父级的父级元素 target : null, // 回调 ...
如何在 vue 中实现一个自定义拖拽的指令或插件
DarinZanya的博客
06-03 765
本文介绍了在Vue中实现元素拖拽功能的两种方式：自定义指令(Vue.directive())和插件(Vue.use())。重点讲解了通过自定义指令实现拖拽的完整流程：1)创建可配置的draggable指令，支持边界限制、拖拽句柄等特性；2)注册指令；3)使用指令。代码实现包含完整的交互逻辑和边界处理，并支持动态配置更新。相比插件方式，自定义指令更适合单一功能的快速实现，而插件更适合复杂场景。该方案通过transform实现平滑拖拽，并提供了完善的清理机制。
vue 组件拖拽
qq_38744614的博客
08-29 7119
vue 组件拖动，自定义属性
Vue学习——拖拽组件
最新发布
分享各种测试中的用到的内容，一起学习
07-16 1084
vue中拖拽组件的简单介绍使用。
vue3 拖拽插件 Vue3DraggableResizable
青蛙king的博客
10-22 9328
【代码】vue3 拖拽插件 Vue3DraggableResizable。
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
10-16
Vue.js 是一个流行的前端框架，用于构建用户界面。...总的来说，`vuedraggable` 是一个强大且灵活的 Vue 拖拽组件，通过合理的配置和事件监听，可以轻松实现列表的拖拽排序和克隆功能，为 Vue 应用增添更多交互性。
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序克隆clone
12-12 543
vue拖拽克隆clone组件API， vue.draggable实现盒子之间相互拖拽排序克隆（网上资源整理的文档） 效果图： 首先需要安装vuedraggable依赖包： npm install vuedraggable --save 因为拖拽组件依赖sortablejs ，如果项目没有安装sortablejs ，可能需要安装一下 npminstallsort...
学习组件拖拽
davidxj的专栏
08-26 687
<br /><?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()"> <mx:Script> <!--[CDATA[ import mx.core.DragSource; import mx.events.DragEvent; import f
原生用拖拽组件
01-02
用于原生的拖拽组件，多功能使用，可限制范围拖拽、为自定义滚动条添加滚动条拖拽事件等
可拖拽布局组件easyui-portal
12-24
以用户为中心 实现信息的集中访问,利用portal 可以方便地将登录用户所需要的，来源各种渠道的信息集成在一个统一的页面模块之内,可拖拽,拖拽后可以记忆位置
draggabilly一款功能强大的拖动拖拽元素插件
01-20
draggabilly一款功能强大的拖动拖拽元素插件
打印排版控件拖拽-付费版
03-12
详见博客：https://blog.youkuaiyun.com/HorseRoll/article/details/114686193
Vue 可拖拽的组件
qq_43195831的博客
09-30 939
可拖拽样式
【vue开发基础】之拖拽组件
坚持不懈 一往无前
07-08 523
【vue开发基础】之拖拽组件
前端10大开源拖拽排序库汇总, 让搭建,更简单
趣谈前端
04-01 5242
❝hi, 大家好, 我是徐小夕,之前和大家分享了很多「低代码可视化」和「前端工程化」相关的话题, 今天继续和大家分享「8」个非常流行的开源「拖拽排序」库以及「2」个非常有价值的「可视化搭建」解决方案.❞1. dragula一款强大且兼容性极好的拖拽排序库, 兼容「IE7+」, 并且支持 「vanilla JavaScript / Angular / React」等框架.「...
Vue3组件拖拽？
2301_79004023的博客
03-16 1469
其他细节可去官网查看文档。vue3拖拽排序组件。
vuedraggable拖拽组件怎么实现
02-28
### 使用 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、付费专栏及课程。

余额充值