【组件】前端js拖拽插件 VUE

【组件】前端js拖拽插件 VUE

Vue Draggable - Vue 拖拽组件王者
Vue drag resize - 轻量级，无依赖，可缩放
Vue smooth dnd - 简单动效，上下拖拽排序，涵盖多场景
V-drag - 最简单的可拖拽执行方案
Vue Easy DnD - 简洁快捷，上下拖拽场景适用
Awe dnd - 基于 vue 2.x 拖放排序组件，元素和图片拖拽通用

vue.draggable中文文档 - itxst.com

vue.draggable中文文档 - itxst.com

SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js (github.com)

演示地址  vuedraggable (sortablejs.github.io)

VUE3

SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.js (github.com)

演示地址 Vuedraggable (sortablejs.github.io)

drag - Web API 接口参考 | MDN (mozilla.org)

jQuery拖拽插件drag.js (jq22.com)

js拖拽插件dragula (jq22.com)

js拖拽插件dragula

Vue drag resize - 轻量级，无依赖，可缩放

vue-drag-resize 支持拖拽和缩放两个大动作，轻量级，无依赖，功能扎实，适合需要缩放的应用场景。

• 无依赖，轻量级
• 操作可联动
• 支持触摸，对移动端友好
• 元素可定义拖拽及缩放
• 可限制拖拽的最大或最小值
• 可限制拖动的方向

Vue smooth dnd - 简单动效，上下拖拽排序，涵盖多场景

vue-smooth-dnd 是一款简单轻量的拖拽排序 Vue 组件，封装了 smooth-dnd 库。它主要包含两个组件，Draggable 和 Container；Container 包含了可拖动的元素，它的每一个子元素都被 Draggable 包裹着，也就是说，每一个子元素都带有可拖拽的属性。

扩展阅读：《如何在 Vue 中导出数据至 Excel 表格》

v-drag - 最简单的可拖拽执行方案

v-drag 简单好用的 Vue 拖拽组件，对触摸事件友好支持。作者对 V-drag 的定位是快速让 Vue 集成拖拽功能，让 v-drag 包裹的元素快速实现拖拽移动功能。

扩展阅读：《如何在 Vue 中加入图表 - Vue echarts 使用教程》

Vue Easy DnD - 简洁快捷，上下拖拽场景适用

Vue-Easy-DnD 就如他的名字一样简单快捷，没有任何啰嗦的功能，支持键盘事件，支持 SSR ，支持触摸事件。

扩展阅读：《顶级好用的 5 款 Vue table 表格组件测评与推荐》

Awe dnd - 基于 vue 2.x 拖放排序组件，元素和图片拖拽通用

Awe-dnd 支持桌面和移动端，有简单动画效果，轻巧简洁，没有太多多余功能。

扩展阅读：《最好用的 7 款 Vue admin 后台管理系统测评》