js/jquery实现流程拖拽,js/jquery实现web流程设计器,js/jquery动态流程图构建

实现意义：
管理员可以随时根据企业的运营发展情况便捷动态调整企业的组织架构(审批)流程、可视化流程建模，通过流程设计器，快速通过“拖、拉、拽”实现流程定义建模，通过流程监控实时分析流程实例的运行数据分析，提供企业流程的不断优化的依据，同时智能流程版本管理功能，当流程变化较大时旧的实例按旧的流程定义运转，新启动的流程按新版本的流程运转，新旧隔离互不影响。从而降低系统维护人力投入及维护时间。

正文：
JQuery UI的拖拽功能：
JQuery UI是JQuery官方支持的WebUI 代码库，包含底层交互、动画、特效等API，并且封装了一些Web小部件（Widget）。同时，JQuery UI继承了jquery的插件支持，有大量的第三方插件可以丰富JQuery UI的功能。
JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。
拖拽原理：
首先要明确几个概念。
　　ource：拖拽源，要拖动的元素。
　　taerget：拖放目标，能够放入source的容器。
拖拽的动作分解如下：
　　1. drag start：在拖拽源(source)上按下鼠标并开始移动
　　2. drag move: 移动过程中
　　3. drag enter:  移动进入目标(target)容器
　　4. drag leave: 移出目标(target)容器
　　5. drop: 在目标(target)容器上释放鼠标
　　6. drag end: 结束
在html5之前，页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。如：


jsPlumb的流程拖拽功能：
jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，十分强大，大家可以在官网的Demo中看看它的功能。如：

官网Demo：https://jsplumbtoolkit.com/demos.html
官网文档(API文档)：https://jsplumbtoolkit.com/docs.html

【参考文献】
WEB流程设计器
JQuery UI的拖拽功能
JQuery UI进行拖拽工作流流程设置
jsPlumb开发入门教程
dagstudio