2024年5月7日发(作者：)
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.
2.
3.
初始化
jsPlumb只有等到DOM初始化完成之后才能使用，因此我们在以下代码中调用
jsPlumb方法
[javascript] view plaincopy
1.
(function() {
2.
...
3.
// some code
4.
...
5.
});
首先，我们给jsPlumb设一些默认值，然后声明一个exampleDropOptions变量。
[plain] view plaincopy
1.
Defaults({
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.
var color2 = "rgba(229,219,61,0.5)";
14.
var exampleEndpoint2 = {
15.
endpoint:"Rectangle", //设置连接点的形状为矩形
16.
anchor:"BottomLeft", //设置连接点的位置，左下角
17.
paintStyle:{ fillStyle:color2, opacity:0.5 }, //设置连接点的颜色、透明度
18.
isSource:true, //同上
19.
scope:'yellow dot', //同上
20.
connectorStyle:{ strokeStyle:color2, lineWidth:4},//同上
21.
connector : "Straight", //设置连线为直线
22.
isTarget:true, //同上
23.
maxConnections:3,//同上
24.
dropOptions : exampleDropOptions,//同上
25.
beforeDetach:function(conn) { //绑定一个函数，在连线前弹出确认框
26.
return confirm("Detach connection?");
27.
},
28.
onMaxConnections:function(info) {//绑定一个函数，当到达最大连接个数时
弹出提示框
29.
alert("Cannot drop connection " + + " : maxConne
ctions has been reached on Endpoint " + );
30.
}
31.
};
将连接点绑定到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 " + + " : maxConnectio
ns has been reached on Endpoint " + );
4.
};
5.
var e1 = point("state2", { anchor:"LeftMiddle" }, exampleEn
dpoint1);//将exampleEndpoint1类型的点绑定到id为state2的元素上
6.
("maxConnections", maxConnectionsCallback);//也可以在加到元素上
之后绑定函数
7.
point("state1", exampleEndpoint1);//将exampleEndpoint1
类型的点绑定到id为state1的元素上
8.
point("state3", exampleEndpoint2);//将exampleEndpoint2
类型的点绑定到id为state3的元素上
9.
point("state1", {anchor:anchors}, exampleEndpoint2);//将
exampleEndpoint2类型的点绑定到id为state1的元素上，指定活动连接点
需要注意的是连接点分为动态连接点和静态连接点。当指定一个数组作为连接点时，
该连接点为动态连接点，连线时会自动选择最近的连接点连接；当指定一个坐标或者固定
位置（TopRight、RightMiddle等）作为连接点时，该连接点为静态连接点，不管怎么连
线都不会移动。具体可参见官方文档。
Html和CSS代码
[html] view plaincopy
1.
2.
3.
4.
5.
html部分仅声明三个div，注意，jsPlumb通过id来识别html元素，因此如果要使
用jsPlumb连线必须声明id。
[css] view plaincopy
1.
最终效果
到此我们就完成了一个简单的jsPlumb连线示例，大家可以在浏览器中运行一下看看
效果。源码可以在这里下载。
进一步学习
本文中的例子参考了Emiel的教程Getting started with jsPlumb以及官方Demo
DraggableConnections，大家也可以看一看。
由于篇幅限制，本文并未对jsPlumb的所有特性及功能进行说明，大家可以通过官网
进行更深入的学习。不过个人认为官方文档比较难读，建议大家可以结合官网的Demo学
习，Demo源码可以在GitHub上下载到。
Demo：/jquery/
官方文档：/doc/home
API：/apidocs/files/
第一次发教程，如果对大家有用的话，还希望能留言支持一下。有任何问题也欢迎大
家一块交流探讨。
个人博客：/zhaoxy2850
本文地址：/zhaoxy2850/article/details/9532143
发布评论