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