jsplumb插件做一个模仿viso的可拖拉流程图

前言

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

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

准备工作

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

1 <script src="<%= ResolveUrl("~/resources/jquery/jquery-1.11.1.min.js")%>" type="text/javascript"></script>2     <script src="<%= ResolveUrl("~/resources/jquery-ui-1.10.4/js/jquery-ui-1.10.4.min.js") %>" type="text/Javascript"></script>3     <script src="<%= ResolveUrl("~/resources/jquery-plugins/jquery.jsPlumb-1.6.2-min.js") %>" type="text/javascript"></script>

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         }

这里还有提到一点，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 <div id="left"> 2             <div class="node radius" id="node1">开始</div> 3             <div class="node" id="node2">流程</div> 4             <div class="node" id="node3">判断</div> 5             <div class="node radius" id="node4">结束</div> 6         </div>      7          8         <div id="right"> 9             <p>拖拉到此区域</p>10         </div>11         <div id="save">12             <input type="button" value="保存" onclick="save()" />13         </div>

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('<div class="node" style="border-radius: 25em"  id="' + id + '" >' + $(ui.helper).html() + '</div>');16                         $("#" + id).css("left", left).css("top", top);17                         jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);18                         jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);19                         jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);20                         jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);21                         jsPlumb.draggable(id);22                         $("#" + id).draggable({ containment: "parent" });23                         doubleclick("#" + id);24                         break;25                     case "node2":26                         i++;27                         id = "state_flow" + i;28                         $(this).append("<div class='node' id='" + id + "'>" + $(ui.helper).html() + "</div>");29                         $("#" + id).css("left", left).css("top", top);30                         jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);31                         jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);32                         jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);33                         jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);34                         jsPlumb.addEndpoint(id, hollowCircle);35                         jsPlumb.draggable(id);36                         $("#" + id).draggable({ containment: "parent" });37                         doubleclick("#" + id);38                         break;39                     case "node3":40                         i++;41                         id = "state_decide" + i;42                         $(this).append("<div class='node' id='" + id + "'>" + $(ui.helper).html() + "</div>");43                         $("#" + id).css("left", left).css("top", top);44                         jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);45                         jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);46                         jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);47                         jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);48                         jsPlumb.addEndpoint(id, hollowCircle);49                         jsPlumb.draggable(id);50                         $("#" + id).draggable({ containment: "parent" });51                         doubleclick("#" + id);52                         break;53                     case "node4":54                         i++;55                         id = "state_end" + i;56                         $(this).