ES6流程拖拽实现思路

目前有不少公司都有工做流的产品。关于工做流的架构大体都是将工做流制定一个规范、标准数据模板，后台程序再解析这些数据模板。一些公司的工做流是数据库配置的，其实推荐将工做流可视化，这样就会节省人力和物力来读懂这些数据。关于流程可视化必然想到了在页面直接操做流程，若是想在页面操做就须要将流程数据图像化，经过操做图像生成能够解析的数据格式。
目前前端技术已经足够先进，咱们彻底无需再使用传统的ES三、ES5去实现这个功能，强大的ES6（面向对象思想）简化了曲折的路径，让只懂一点点JS的后端开发人员彻底能够上手实现这一功能。
首先，须要配置nodejs环境，由于强大的nodejs有可以编译ES6的组件babel。https://nodejs.org/en/
其次，须要建立一个工程，引入webpack打包工具，咱们最终会将全部js文件打包成一个bundle.js的文件并压缩混淆。https://webpack.github.io/
最后，咱们须要引入编译器babel。https://www.babeljs.cn/
环境搭好以后，咱们开始工程的设计。
页面布局是流程操做栏，工具箱（流程组件），绘图区。咱们经过操做工具栏的组件，在绘图区绘制出流程的环节模块，每一个模块都须要设置各类属性，固然，对于整个流程也须要属性设置。
布局定下来以后，就该实现如何拖拽了。关于这部分能够了解一下H5的流程拖拽方法，这里推荐大神张鑫旭的文章http://www.zhangxinxu.com/wor...
有了流程的模块，固然还须要线路的指向。这里须要使用svg实现这个功能。咱们须要在画布区域放置一个svg的显示区，当拖拽工具的线条在这里生成svg的路径path，而后将线条的两端链接两个环节模块，这就须要经过改变path的路径属性来实现。具体svg的基础知识能够参考大神阮一峰的文章http://www.ruanyifeng.com/blo...
如今就剩下按照本身的需求继续完善具体功能了，看看我本身作的功能吧：

有问题的能够在加QQ交流群交流：1003516412