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:"http://里面的值隨便,只是一個標識"。

下面是完整的拖放：

 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).