未来往事

jquery web流程图拖拽构建 晴

Rinald 本站原创 WEB前端 2016/12/09 01:10
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
作者:Rinald @『未来往事 | 记录生活,存储回忆!
原文地址:http://fity.cn/post/600/
本站采用「署名 4.0 国际(CC BY 4.0)」创作共享协议。通俗地讲,只要在使用时署名,那么使用者可以对本站所有原创内容进行转载、节选、混编、二次创作,允许商业性使用。除非在文章正文内单独说明,本站欢迎各种形式的转载。互联网技术更新很快,本站很多文章都具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请大家在转载时保留此出处信息。
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮(电子邮件地址不会被公开, 仅用于接收评论回复提醒使用)
OpenID登入 权限选项 表情