共计 1836 个字符，预计需要花费 5 分钟才能阅读完成。
本文首发：《最好用的 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 小时搞定。
卡拉云是新一代低代码开发工具，免装置部署，可一键接入包含 MySQL 在内的常见数据库及 API。可依据本人的工作流，定制开发。无需繁琐的前端开发，只须要简略拖拽，即可疾速搭建企业外部工具。 原来三天的开发工作量，应用卡拉云后可缩减至 1 小时，欢送收费试用卡拉云。
扩大浏览：
- 最好用的七大顶级 API 接口测试工具
- 最好用的 5 款 React 富文本编辑器
- 最好用的 12 款 Vue Timepicker 工夫日期选择器测评举荐
- 顶级好用的 5 款 Vue table 表格组件测评与举荐
- Postman 应用教程 – 手把手教你 API 接口测试
- 最好的 6 个收费天气 API 接口比照测评
- 如何在 Vue 中导出数据至 Excel 表格
