乐趣区

关于前端:最好用的-6-款-Vue-拖拽组件库推荐-卡拉云

本文首发:《最好用的 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 和 ContainerContainer 蕴含了可拖动的元素,它的每一个子元素都被 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 表格
退出移动版