最好用的 6 款 Vue 拖拽组件库推荐
Vue 拖拽组件库(drag-and-drop)组件在使用 Vue 框架开发中非常常见的需求,做个内容行排序,拖拽小组件到网页上这类都需要用到拖拽组件。本文记录了我自己用过的 6 款 Vue 拖拽组件库,它们各有各的特点,推荐给大家。
如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即可快速搭建属于你自己的后台管理工具,一周工作量缩减至一天,详见本文文末。
接下来介绍 6 款我自己常用的 Vue 拖拽组件,它们各有特色,希望能帮你找到合适你的组件库
Vue Draggable - Vue 拖拽组件王者
Vue drag resize - 轻量级,无依赖,可缩放
Vue smooth dnd - 简单动效,上下拖拽排序,涵盖多场景
V-drag - 最简单的可拖拽执行方案
Vue Easy DnD - 简洁快捷,上下拖拽场景适用
Awe dnd - 基于 vue 2.x 拖放排序组件,元素和图片拖拽通用
1. Vue Draggable - Vue 拖拽组件王者
Vue.Draggable 必须第一个推荐,Vue 拖拽组件里的王者,适应大多数应用场景,流畅顺滑。Vue.Draggable 基于 Sortable.js(一款轻量级拖拽排序 JS 插件) 开发的 Vue 拖拽组件。
对移动设备友好支持,支持触控,支持智能滚屏。
拖拽与选取文本识别:有时用户会想复制拖拽元素上的文字,多数库无法识别此类用户操作,vue.draggable 可以识别拖拽动作或选择文字的动作。
对 Vue UI 库友好,你可以把现有的 Vue 组件附加到可拖拽的元素上,实现这个组件的拖拽功能。
扩展阅读:《最好用的 7 个 Vue Tree select 树形组件》
2.Vue drag resize - 轻量级,无依赖,可缩放
vue-drag-resize 支持拖拽和缩放两个大动作,轻量级,无依赖,功能扎实,适合需要缩放的应用场景。
- 无依赖,轻量级
- 操作可联动
- 支持触摸,对移动端友好
- 元素可定义拖拽及缩放
- 可限制拖拽的最大或最小值
- 可限制拖动的方向
扩展阅读:《如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表》
3. Vue smooth dnd - 简单动效,上下拖拽排序,涵盖多场景
vue-smooth-dnd 是一款简单轻量的拖拽排序 Vue 组件,封装了 smooth-dnd 库。它主要包含两个组件,Draggable 和 Container;Container 包含了可拖动的元素,它的每一个子元素都被 Draggable 包裹着,也就是说,每一个子元素都带有可拖拽的属性。
扩展阅读:《如何在 Vue 中导出数据至 Excel 表格》
4. v-drag - 最简单的可拖拽执行方案
v-drag 简单好用的 Vue 拖拽组件,对触摸事件友好支持。作者对 V-drag 的定位是快速让 Vue 集成拖拽功能,让 v-drag 包裹的元素快速实现拖拽移动功能。
扩展阅读:《如何在 Vue 中加入图表 - Vue echarts 使用教程》
5. Vue Easy DnD - 简洁快捷,上下拖拽场景适用
Vue-Easy-DnD 就如他的名字一样简单快捷,没有任何啰嗦的功能,支持键盘事件,支持 SSR ,支持触摸事件。
扩展阅读:《顶级好用的 5 款 Vue table 表格组件测评与推荐》
6. Awe dnd - 基于 vue 2.x 拖放排序组件,元素和图片拖拽通用
Awe-dnd 支持桌面和移动端,有简单动画效果,轻巧简洁,没有太多多余功能。
扩展阅读:《最好用的 7 款 Vue admin 后台管理系统测评》
7.总结
本文主要介绍多款 Vue 拖拽组件库。如果不想处理前端问题,推荐使用卡拉云,卡拉云内置各类组件,无需懂任何前端,仅需拖拽即可快速生成。
下图为使用卡拉云搭建的内部广告投放监测系统,仅需拖拽,1小时搞定。
扩展阅读:
最好用的七大顶级 API 接口测试工具
最好用的 5 款 React 富文本编辑器
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐
顶级好用的 5 款 Vue table 表格组件测评与推荐
Postman 使用教程 - 手把手教你 API 接口测试
最好的 6 个免费天气 API 接口对比测评
如何在 Vue 中导出数据至 Excel 表格
————————————————
版权声明:本文为CSDN博主「蒋川_卡拉云」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_48201324/article/details/123287114
相关文章
- vue项目实现常见的三种文件类型在线预览(pdf/word文件excel表格)
- 普通html网站引用Vue单文件组件
- VUE 在一个组件中引用另外一个组件的两种方式
- VUE 注册全局组件
- 精品微信小程序ssm校友录网站+后台管理系统|前后分离VUE
- Vue.js:webpack.config.js配置和package.json配置学习笔记
- 如何下载vue.js
- vue.js:v-model结合radio的使用
- 【Vue】组件的基础与组件间通信
- vue中使用v-bind="$attrs"和v-on="$listeners"进行多层组件监听
- vue 的 main.js 设置
- 修改vue中<router-link>的默认样式
- vue笔记 递归组件的使用
- 整理4种Vue组件通信方式
- vue 组件间传值
- vue-常用钩子函数
- 场景类:vue弹框之终极好用版
- Vue框架背后的故事
- Vue 组件 data为什么是函数?
- 【Vue 开发实战】基础篇 # 6:双向绑定和单向数据流不冲突
- vue 里如何获取 data 中数据的初始状态?
- 前端面试:专注Vue.js常见的问题答疑,掌握了基本上Vue就过关了
- Vue 服务端渲染(SSR)、Nuxt.js - 从入门到实践
- Vue源码详细解析
- Vue插件写、用详解(附demo)
- vue编写的移动端筛选条组件。
- Vue入门之组件化开发
- Vue路由详解
- ajax请求插件vue-resource的学习
- vue——qs插件的使用