ES6流程拖拽實現思路

myshell 發布于2019-08-02 16:13 / 460人閱讀

摘要：頁面布局是流程操作欄，工具箱流程組件，繪圖區。關于這部分可以了解一下的流程拖拽方法，這里推薦大神張鑫旭的文章有了流程的模塊，當然還需要線路的指向。

目前有很多公司都有工作流的產品。關于工作流的架構大致都是將工作流制定一個規范、標準數據模板，后臺程序再解析這些數據模板。一些公司的工作流是數據庫配置的，其實推薦將工作流可視化，這樣就會節省人力和物力來讀懂這些數據。關于流程可視化必然想到了在頁面直接操作流程，如果想在頁面操作就需要將流程數據圖像化，通過操作圖像生成可以解析的數據格式。
目前前端技術已經足夠先進，我們完全無需再使用傳統的ES3、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

GPU云服務器云服務器實現思路實現拖拽防ddos攻擊軟件思路實現 js實現數據拖拽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54881.html

ES6流程拖拽實現思路

摘要：頁面布局是流程操作欄，工具箱流程組件，繪圖區。關于這部分可以了解一下的流程拖拽方法，這里推薦大神張鑫旭的文章有了流程的模塊，當然還需要線路的指向。目前有很多公司都有工作流的產品。關于工作流的架構大致都是將工作流制定一個規范、標準數據模板，后臺程序再解析這些數據模板。一些公司的工作流是數據庫配置的，其實推薦將工作流可視化，這樣就會節省人力和物力來讀懂這些數據。關于流程可視化必然想到了在...

mylxsw 2019-08-23 16:56 評論0 收藏0
百度網盤文件夾框選功能

摘要：案例說明使用原生完成桌面操作級應用，對于原生的掌握情況而言，是一個較為全面的綜合型案例。本次課從事件相關的功能入手，給大家帶來詳細的分享。 showImg(https://segmentfault.com/img/bVbh1qw); 案例說明：使用原生 JS 完成桌面操作級應用，對于原生 JS 的掌握情況而言，是一個較為全面的綜合型案例。本次課從事件（event）相關的功能入手，給大家...

jkyin 2019-08-29 16:55 評論0 收藏0
前端實驗手札——拖拽旋轉圖片的實現及思路

摘要：在拖拽旋轉圖片的實現中，最符合的就是上面這題的情況，接下來好好說明一下。經過按計算機推導出來的結論，反三角函數計算出來的結果是弧度，而一直使用的角表示的其實是角的弧度。拖拽圍繞著圖片的中心旋轉，圖片中心作為公式中的原點設為點使用。讓我們來看看以下這道題：已知點A(x1,y1)和點B(x2,y2)，求兩點求與圓點O(x0,y0)的夾角θ的角度：∠θ=arctan[(y2-y0)/(x...

tianren124 2019-08-23 11:31 評論0 收藏0
sSpring Boot多模塊+ Shiro + Vue：前后端分離登陸整合，權限認證（一）

摘要：前言本文主要使用來實現前后端分離的認證登陸和權限管理，適合和我一樣剛開始接觸前后端完全分離項目的同學，但是你必須自己搭建過前端項目和后端項目，本文主要是介紹他們之間的互通，如果不知道這么搭建前端項目的同學可以先找別的看一下。前言本文主要使用spring boot + shiro + vue來實現前后端分離的認證登陸和權限管理，適合和我一樣剛開始接觸前后端完全分離項目的同學，但是你必...

macg0406 2019-08-19 11:38 評論0 收藏0