在项目中，使用了Web中的拖放式流程图技术jsplumble，其实并不难。不过项目中一些用HTML制作的类似flash的效果感觉还不错，在这里分享一下。

一、渲染显示。

1.将元素从左侧拖到中间区域，然后连接。

2.连接类型可以自定义：这里定义为直线、折线、曲线。在实际项目中，根据业务，我们将其定义为分装线、分装支线和总装线等。

3.在鼠标拖动区域选择元素，选择元素的统一拖动位置。

4.将所选元素向左对齐。

5.将所选元素居中对齐。

6.右对齐。

7.顶部对齐。

8.垂直居中对齐。

9.底部对齐。

10.根据第一个选定的元素上下移动。

11、按第一个选中元素左右移动。

12.根据第一个选定的元素，它是相同的高度。

13.根据第一个选定元素的宽度来选择。

14.顺时针旋转选定的元素，然后单击一次以旋转45度。

15.逆时针旋转选定的元素。

16、选择统一删除元素和元素上方的连接。

事实上，这里的很多效果在项目中并不是很有效，很多只是为了展示。

第二，这里的详细代码涉及很多效果，可能分几个部分介绍。让我们来看看构建流程图的核心技术：jsplumble。

1.总结jsplumble的内容，在这里简单说明一下。JsPlumb是一个功能强大的JavaScript连接库，可以用箭头、曲线、直线等连接html中的元素。适合在Web上开发图表和建模工具。它还支持三个JavaScript框架：jQuery jQuery UI、MooTools和YUI3，功能非常强大。在这个项目中，我们将使用大家最熟悉的JQuery进行解释。还有一点需要注意的是jsplumble的浏览器兼容性，支持IE 6及以上、Firefox、Google等各种浏览器。

2.使用(1)导入js文件，可以直接去官网下载最新的JS库。由于JsPlumb需要jQuery的支持，根据网上的说法，它只兼容jQuery1.3.x及以上版本，在jQuery UI 1.7.x、1.8.x和1.9.x上已经通过测试，所以我们需要下载更高版本的JQuery和jQuery UI。JsPlumb的内容只需要引用一个Js。类似的

Script src=' http : ~/Content/jquery-1 . 9 . 1 . min . js '/Script Script src=' http : ~/Content/jquery-ui-1 . 11 . 4 . custom/jquery-ui . js '/Script link href=' ~/Content/jquery-ui-1 . 11 . 4 . custom/jquery-ui . min . CSS ' rel='样式表'/Script src=' http 3360 ~/Content/jsPlumb在我们的项目中，左边的模型区域是中间的设计区域。为了从模型区域创建一个元素，我们需要在JQuery用户界面中使用可拖动和可删除的事件。首先，我们在左侧模型中注册可拖动事件，在中间区域注册可拖放事件。

cshtml页面的代码，div id='divContentLeftMenu '这是左边模型的容器，div id='divCenter'/div表示中间区域容器。

div id=' div contentleftmenu ' div class='侧边栏-菜单id=' div侧边栏a href=' #植物模型' onclick=' Resize()' class=' nav-标题菜单-第一个折叠的'数据-切换='折叠'工厂模型/a ul id=' plant model ' class=' nav-list折叠菜单-second '/ul a href=' # artline model ' onclick=' Resize()' class=' nav-header menu-first collapsed ' data-toggle=' collapse '工艺段模型/a ul id=' artline model ' class=' nav-list折叠菜单-第二个'阿利href='#' div class='节点半径id=' node 4 ' db type=' DTO _ TM _ ART _ LINE '标签工段/label /div /a /li阿利工位/label/div/a/Li/ul/div/div id=' DivCenter '/Divjs代码：首先我们定义几个点的样式的全局变量

//基本连接线样式var connectionpaintstyle={ strokestyle : ' # 1e 8151 '，fillStyle: '透明，radius: 5，线宽： 2 }；//鼠标悬浮在连接线上的样式var connectionwhistyle={线宽： 3，strokeStyle: '#216477 '，outlineWidth: 2，outlinecolor : ' white ' }；var endpointhover style={ fill style : ' # 216477 '，stroke style : ' # 216477 ' }；//空心圆端点样式设置var空心圆={拖动选项3360 {光标： '指针'，zIndex: 2000 }，端点： ['点'，{ radius: 7 }]，//端点的形状连接器样式：连接器绘画样式，//连接线的颜色，大小样式连接器悬停样式：连接器悬停样式，绘画样式： { strokeStyle: '#1e8151 '，填充样式： '透明，半径： 5,线宽： 2 },//端点的颜色样式//anchor: 'AutoDefault '，isSource: true，//是否可以拖动（作为连线起点)连接器： ['直，{ stub 3360[0，0]，间隙： 10,角半径： 5,始终分别为： true }]，//连接线的样式种类有[贝塞尔],[流程图],[状态机],[直线]istatarget : true，//是否可以放置（连线终点)maxconnections 3360-1，//设置连接点最多可以连接几条线连接器重叠： [['箭头',{宽度： 10,长度： 10,位置： 1 }]};然后再页面初始化完成之后注册事件

$(function(){ //左边区域的可拖动的事件$('#divContentLeftMenu .节点')。可拖动({ helper: 'clone '，scope : ' plant ' })；//中间拖拽区的滴事件$('#divCenter ').可删除({ scope: 'plant '，drop:函数(事件，用户界面){ //创建工厂模型到拖拽区CreateModel(ui，$(this))；} });});//1.创建模型（参数依次为：放下事件的ui、当前容器、id、当前样式)函数CreateModel(用户界面，选择器){ //1.1添加超文本标记语言模型var modelid=$(ui.draggable).attr(' id ')；我；var id=模型id I；var cur _ css=modelidvar类型=$(ui.helper).attr(' dbtype ')；$(选择器)。追加(' div class=' node ' cur _ CSS ' ' id=' id ' ' dbtype=' type ' ' parent id=' ' $(选择器))。attr(' id ')' ' onclick=' InToElement .blclick=' InitStation()'上的getpropertyetbytype( ' ' type ' '，this)' .DbClick( ' type ' '，this)' ' $(ui.helper).html()'/div ')；var left=ParSeint(ui。偏移。左-$(选择器)。偏移量()。左);var top=ParSeint(ui。偏移。top-$(选择器)。偏移量()。顶部);$("#"id).css(“”左，左)。css('top '，top)；//jsplumble。setcontainer($(' # div center '))；//1.2 添加连接点jsplumble。addendpoint(id，{ anchors: ' RightMiddle ' }，hollocircle)；jsplumble。addendpoint(id，{ anchors: ' LeftMiddle ' }，hollocircle)；jsplumble。addendpoint(id，{ anchors: ' TopCenter ' }，hollocircle)；jsplumble。addendpoint(id，{ anchors: ' BottomCenter ' }，hollocircle)；jsplumble。拖动山墙(id)；//1.3 注册实体可可拖动的和可调整大小的$("#"id).可拖动({ containment: 'parent '，start : function(){ startMove()；}，drag:函数（事件，ui) { MoveSelectDiv(事件，ui，id)；jsplumble。重画一切()；}，停止：函数(){js普拉姆布利。重画一切()；} });$("#"id).可调整大小({ resize : }函数(){ jspLamble。重画一切()；}，停止：函数(){js普拉姆布利。重画一切()；//oInitElement .SendPropRequest('DTO_TM_PLANT '，$(this))；} });返回id；};重点来看看这一句：

jsplumble。addendpoint(id，{ anchors: ' RightMiddle ' }，hollocircle)；调用了JsPlumb里面的添加端点方法，第一个参数表示页面标签的id，第一个表示连线点的位置（右中、左中、上中、下中四个选项);第三参数表示点的样式以及连线的样式。没调用依次添加端点方法，元素上面就会多一个连线的节点。关于空心圆里面各个参数的意义，可以查看api。

还有一句多个地方都看到了：

jsplumble。重画一切()；看字面意思大概能知道这句是干什么的，修复所有。当在中间区域拖动元素的时候，如果不带这一句，节点不会跟着元素一起移动。加上之后节点才会跟随标签移动。至此，最基础的JsPlumb连线就完成了。

以上就是本文的全部内容，希望能够帮助大家学习掌握流程图的核心技术JsPlumb。