vue可拖拽流程图

1、特性

支持元素节点有图形面板区拖拽至主画布,拖拽调整元素位置,拖拽调整元素大小 支持通过拖拽形式进行节点间连线,可控的节点连接桩,以及对已有连线拖拽调整连线位置 支持缩略图 支持键盘快捷键监听,例如Del BackPlace ctrl等按键以及组合键 支持流程编辑操作的撤销,重做,清空,保存图数据,读取数据后渲染图 支持鼠标悬停,点击,单选,框选元素,以及触发相关事件 支持监听流程图窗口尺寸变化,以便调整画布尺寸

2、使用说明

按下ctrl后将鼠标移入连线可进行连线拐点调整 按下ctrl后使用鼠标左键单击圆角矩形节点,可继续节点尺寸大小调整 按下ctrl和不按下ctrl对应鼠标滚动操作不同 单击或框选节点和连线后,可通过Del或BlackPlace键删除选中对象 ctrl+z 撤销;ctrl+y 重做 保存和刷新网页触发的事件为模拟实际的HTTP请求

3、安装

# install dependencies
npm install
 
# serve with hot reload at localhost:8080
npm run dev
 
# build for production with minification
npm run build
 
# build for production and view the bundle analyzer report
npm run build --report

4、相关依赖

AntV X6 ：简介 | X6

vue super flow : 使用说明 | Vue super flow

5、相关文章

（1）Vue工作流渲染 可拖拽编辑流程图（附源码）：

Vue工作流渲染 可拖拽编辑流程图（附源码）_vue可拖拽流程图-CSDN博客

（2）vue实现对指定节点进行拖拽成流程图

vue实现对指定节点进行拖拽成流程图_vueflow实现左侧树节点可拖拽到右侧流程图-CSDN博客

（3）基于vue2.x+antv x6实现可拖拽编辑拓流程拓扑图

https://www.cnblogs.com/gengzhen/p/14652385.html

代码：vue-antvx6-demo: 基于 vue 2.x 和阿里的antv X6制作的一个可视化可拖拽流程拓扑图 - Gitee.com

（4）vue项目里引用Gojs画可拖拽流程图

vue项目里引用Gojs画可拖拽流程图 | 码农家园

6、技术合集

1.G6

2.X6

3.GOJS

4.Vue super flow

优质代码：

1、vue+antv x6：

vue+antv x6: vue+antv绘制流程图（可编辑、删除、展示）

2、fadeds vue-x6 ：

https://github.com/fadeds/vue-x6 【网格背景设置、保存图、后台数据】

7、vue拖拽

vuedraggable的使用 ： vuedraggable的使用-CSDN博客

js原生 vue使用draggable进行拖拽填充 ：

js原生 vue使用draggable进行拖拽填充_el-draggable-CSDN博客

LuvkySheet 根据返回的行和列求具体单元格位置 :

LuvkySheet 根据返回的行和列求具体单元格位置_luckysheet前端获取到行数跟列数如何转换为单元格-CSDN博客

8、elementUi + Vue-super-flow 实现树节点可拖拽绘制流程图

vue实现对指定节点进行拖拽成流程图 - 百度文库

vue实现对指定节点进行拖拽成流程图_vueflow实现左侧树节点可拖拽到右侧流程图-CSDN博客

https://www.pudn.com/news/6228d28a9ddf223e1ad19243.html

elementUi + Vue-super-flow 实现树节点可拖拽绘制流程图_vue流程图开发element-CSDN博客