前言

这是我第一次写博客，心情还是有点小小的激动！这次主要分享的是用jsPlumb，做一个可以给用户自定义拖拉的流程图，并且可以序列化保存在服务器端。

我在这次的实现上面做得比较粗糙，还有分享我在做jsPlumb流程图遇到的一些问题。

准备工作

制作流程图用到的相关的脚本：

1

2

3

jsPlumb-1.6.2-min.js在官网上下载，这里用得是最新版本。jquery-1.11.1.min.js等脚本百度上都能找到，这里就不多说了。

css样式在官网里也可以搜到，这里我就贴出来。

1 .node{

2 box-shadow:2px 2px 19px #aaa;

3 -o-box-shadow:2px 2px 19px #aaa;

4 -webkit-box-shadow:2px 2px 19px #aaa;

5 -moz-box-shadow:2px 2px 19px #aaa;

6 -moz-border-radius:0.5em;

7 border-radius:0.5em;

8 opacity:0.8;

9 filter:alpha(opacity=80);

10 border:1px solid #346789;

11 width:150px;

12 /*line-height: 40px;*/

13 text-align:center;

14 z-index:20;

15 position:absolute;

16 background-color:#eeeeef;

17 color:black;

18 padding:10px;

19 font-size:9pt;

20 cursor:pointer;

21 height:50px;

22 line-height:50px;

23 }

24 .radius{

25 border-radius:25em;

26 }

27 .node:hover{

28 box-shadow:2px 2px 19px #444;

29 -o-box-shadow:2px 2px 19px #444;

30 -webkit-box-shadow:2px 2px 19px #444;

31 -moz-box-shadow:2px 2px 19px #444;

32 opacity:0.8;

33 filter:alpha(opacity=80);

34 }

View Code

这里还有提到一点，jsPlumb官网上的api全是英文的，博主我从小英文就不好，所以看里面的doc非常费劲，一般都是一边开着金山翻译，

一边看着文档，英语好的略过这段。

正文

言归正传，现在开始我们的jsPlumb流程图制作，下面先附上流程图。

功能

根据客户的要求，我们要完成的功能点有以下几点：

1.支持将左边的div层复制拖拉到右边中间的层，并且左边同一个div拖拉没有次数限制，如果只能拖拉一次，做这个东西就没有什么意义了。

2.拖拉到中间的div层可以拖动，拖动不能超过中间div的边框。

3.拖动到中间的层，四周能有4个endpoint点，可供客户连线。

4.能支持删除多余的div的功能。

5.支持删除连接线。

6.能双击修改流程图的文字。

7.能序列化保存流程图。

操作

下面我们根据功能开始制作：

1.拖拉jsPlumb其实是提供draggable方法，和droppable方法官网里有介绍， 但是我这里用得是jquery里的draggable()和droppable()。

1

7

8

11

View Code

1 $("#left").children().draggable({2 helper: "clone",3 scope: "ss",4 });

helper:"clone"表示复制，scope:"ss"是一个标识为了判断是否可以放置，主要用于droppable方法里面也设置这个标识来判断拖放到的地方，

除非两个都不写scope，可以随便拖放，但是会有一个问题，每次我从左边拖东西到右边，我再拖到的时候就会有div拖到不了，所以最好设置

scope:"//里面的值随便,只是一个标识"。

下面是完整的拖放：

1 $("#left").children().draggable({2 helper: "clone",3 scope: "ss",4 });5 $("#right").droppable({6 scope: "ss",7 drop: function (event, ui) {8 var left = parseInt(ui.offset.left - $(this).offset().left);9 var top = parseInt(ui.offset.top - $(this).offset().top);10 var name = ui.draggable[0].id;11 switch (name) {12 case "node1":13 i++;14 var id = "state_start" + i;15 $(this).append('' + $(ui.helper).html() + '