jsPlumb开发入门教程（实现html5拖拽连线）

jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，十分强大。大家可以在官网的Demo中看看它的功能。目前可用的jsPlumb中文资料很少，希望这篇教程可以帮助大家更快的了解jsPlumb。出于篇幅考虑，本教程将以jQuery为例介绍jsPlumb。

浏览器兼容性

在使用jsPlumb之前，大家需要先了解一下各浏览器对jsPlumb的兼容性。jsPlumb支持IE6以上以及各大浏览器，但是仍然有一些bug：

∙ 在IE9上，由于jQuery1.6.x和1.7.x的SVG相关实现有一个bug，会导致鼠标停留事件无法响应

∙ Safari5.1上有一个SVG的bug，会导致鼠标事件无法通过SVG元素的透明区域传递

∙ 在Firefox11上基于MooTools使用SVG时会出现一些问题

下载和引入

jsPlumb的源码和Demo可以在GitHub上下载，不想下载整个工程的可以直接从这里下载1.4.0版本。

在引入jsPlumb的同时，还需要引入jQuery和jQuery UI。需要说明的是，jsPlumb只兼容jQuery1.3.x及以上版本，并在jQuery UI 1.7.x、1.8.x及1.9.x上测试通过。另外，如果你使用1.7.x、1.8.x的jQuery UI，还需要额外引入jQuery UI Touch Punch。

[javascript] view plaincopy

1. "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">  

2. "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js">  

3. "text/javascript" src="PATH_TO/jquery.jsPlumb-1.4.0-all-min.js ">  

初始化

jsPlumb只有等到DOM初始化完成之后才能使用，因此我们在以下代码中调用jsPlumb方法

[javascript] view plaincopy

1. jsPlumb.ready(function() {  

2. ...           

3. // some code  

4. ...  

5. });  

首先，我们给jsPlumb设一些默认值，然后声明一个exampleDropOptions变量。

[plain] view plaincopy

1. jsPlumb.importDefaults({  

2.     DragOptions : { cursor: 'pointer'}, //拖动时鼠标停留在该元素上显示指针，通过css控制  

3.     PaintStyle : { strokeStyle:'#666' },//元素的默认颜色  

4.     EndpointStyle : { width:20, height:16, strokeStyle:'#666' },//连接点的默认颜色  

5.     Endpoint : "Rectangle",//连接点的默认形状  

6.     Anchors : ["TopCenter"]//连接点的默认位置  

7. });  

8. var exampleDropOptions = {  

9.     hoverClass:"dropHover",//释放时指定鼠标停留在该元素上使用的css class  

10.     activeClass:"dragActive"//可拖动到的元素使用的css class  

11. };  

添加jsPlumb连接点

然后声明两种类型的连接点。

[javascript] view plaincopy

1. var color1 = "#316b31";                       

2. var exampleEndpoint1 = {              

3.     endpoint:["Dot", { radius:11 }],//设置连接点的形状为圆形  

4.     paintStyle:{ fillStyle:color1 },//设置连接点的颜色  

5.     isSource:true,  //是否可以拖动（作为连线起点）  

6.     scope:"green dot",//连接点的标识符，只有标识符相同的连接点才能连接  

7.     connectorStyle:{ strokeStyle:color1, lineWidth:6 },//连线颜色、粗细  

8.     connector: ["Bezier", { curviness:63 } ],//设置连线为贝塞尔曲线  

9.     maxConnections:1,//设置连接点最多可以连接几条线  

10.     isTarget:true,  //是否可以放置（作为连线终点）  

11.     dropOptions : exampleDropOptions//设置放置相关的css  

12. };  

13.   

14. var color2 = "rgba(229,219,61,0.5)";  

15. var exampleEndpoint2 = {  

16.     endpoint:"Rectangle",   //设置连接点的形状为矩形  

17.     anchor:"BottomLeft",    //设置连接点的位置，左下角  

18.     paintStyle:{ fillStyle:color2, opacity:0.5 },   //设置连接点的颜色、透明度  

19.     isSource:true,  //同上  

20.     scope:'yellow dot', //同上  

21.     connectorStyle:{ strokeStyle:color2, lineWidth:4},//同上  

22.     connector : "Straight", //设置连线为直线  

23.     isTarget:true,  //同上  

24.     maxConnections:3,//同上  

25.     dropOptions : exampleDropOptions,//同上  

26.     beforeDetach:function(conn) {   //绑定一个函数，在连线前弹出确认框  

27.         return confirm("Detach connection?");  

28.     },  

29.     onMaxConnections:function(info) {//绑定一个函数，当到达最大连接个数时弹出提示框  

30.         alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);  

31.     }  

32. };  

将连接点绑定到html元素上

[javascript] view plaincopy

1. var anchors = [[1, 0.2, 1, 0], [0.8, 1, 0, 1], [0, 0.8, -1, 0], [0.2, 0, 0, -1] ],  

2.     maxConnectionsCallback = function(info) {  

3.         alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);  

4.     };  

5.   

6.   

7. var e1 = jsPlumb.addEndpoint("state2", { anchor:"LeftMiddle" }, exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state2的元素上  

8. e1.bind("maxConnections", maxConnectionsCallback);//也可以在加到元素上之后绑定函数  

9.   

10. jsPlumb.addEndpoint("state1", exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state1的元素上  

11. jsPlumb.addEndpoint("state3", exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state3的元素上  

12. jsPlumb.addEndpoint("state1", {anchor:anchors}, exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state1的元素上，指定活动连接点  

需要注意的是连接点分为动态连接点和静态连接点。当指定一个数组作为连接点时，该连接点为动态连接点，连线时会自动选择最近的连接点连接；当指定一个坐标或者固定位置（TopRight、RightMiddle等）作为连接点时，该连接点为静态连接点，不管怎么连线都不会移动。具体可参见官方文档。

Html和CSS代码

[html] view plaincopy

1.   

2.  id="state1" class="item">