「前端」Vue3 生态 10 个拖拽神库！覆盖 99% 拖拽需求！

Vue3 生态 10 大拖拽神库！覆盖 99% 拖拽场景
—— 列表排序、网格看板、图形编辑器一次搞定

1. vue-draggable-plus

基于 Sortable.js 的 Vue3 超集，列表拖拽天花板

图片

  • 官方文档：https://vue-draggable-plus.pages.dev/en/

  • GitHub：https://github.com/Alfred-Skyblue/vue-draggable-plus

  • 在线预览：https://stackblitz.com/edit/github-b2xatc-qe8qxj?file=src%2FApp.vue

2. Vue Fluid DnD

丝滑动画级列表拖拽，支持虚拟滚动

图片

  • 官方文档：https://vue-fluid-dnd.netlify.app/introduction/introduction/

  • GitHub：https://github.com/carlosjorger/vue-fluid-dnd

  • 在线预览：https://vue-fluid-dnd.netlify.app/example/vertical-list/single-vertical-list/

3. ES Drager

8 KB 图形编辑器三件套：拖、缩放、旋转

图片

  • 官方文档：https://vangleer.github.io/es-drager/#/basic

  • GitHub：https://github.com/vangleer/es-drager

  • 在线预览：https://vangleer.github.io/es-drager/

4. GridLayoutPlus

响应式网格拖拽布局，仪表盘神器

图片

  • 官方文档：https://grid-layout-plus.netlify.app/zh/

  • GitHub：https://github.com/qmhc/grid-layout-plus

  • 在线预览：https://grid-layout-plus.netlify.app/zh/example/

5. Vue3-draggable-resizable

自带冲突检测、参考线的全能拖拽缩放组件

图片

  • 官方文档：https://github.com/a7650/vue3-draggable-resizable/blob/main/docs/document_zh.md

  • GitHub：https://github.com/a7650/vue3-draggable-resizable

  • 在线预览：https://a7650.github.io/vue3-draggable-resizable/

6. Vue-drag-resize（Next）

Vue2 经典续作，快速原型首选

图片

  • 官方文档：https://github.com/kirillmurashov/vue-drag-resize#readme

  • GitHub：https://github.com/kirillmurashov/vue-drag-resize

  • 在线预览：https://kirillmurashov.com/vue-drag-resize/

7. Revue-draggable

Vue2/3 双吃，组件/指令/Hook 全形态

图片

  • 官方文档：https://github.com/bcakmakoglu/revue-draggable#readme

  • GitHub：https://github.com/bcakmakoglu/revue-draggable

  • 在线预览：https://revue-draggable.vercel.app/

8. interact.js + Vue3 原生封装

底层交互之王，30 行代码自研设计器

图片

  • 官方文档：https://interactjs.io/docs/

  • GitHub：https://github.com/taye/interact.js

  • 在线示例：https://interactjs.io/

9. Vue Kanban（Vue3 分支）

看板/泳道专用，Todo 迁移零成本

图片

  • 官方文档：https://github.com/BrockReece/vue-kanban#readme

  • GitHub：https://github.com/BrockReece/vue-kanban

  • 在线预览：https://brockreece.github.io/vue-kanban/

10. Tauri + Vue3 桌面拖拽系统

把网页拖成原生，跨平台 5 MB 安装包

图片

  • Tauri 官网：https://tauri.app/

  • 模板仓库：https://github.com/tauri-apps/tauri

评论