2023年7月9日发(作者：)

jsPlumb开发⼊门教程（实现html5拖拽连线）jsPlumb是⼀个强⼤的JavaScript连线库，它可以将html中的元素⽤箭头、曲线、直线等连接起来，适⽤于开发Web上的图表、建模⼯具等。它同时⽀持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，⼗分强⼤。⼤家可以在中看看它的功能。⽬前可⽤的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可以在 上下载，不想下载整个⼯程的可以直接从 下载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。初始化jsPlumb只有等到DOM初始化完成之后才能使⽤，因此我们在以下代码中调⽤jsPlumb⽅法(function() {...

// });⾸先，我们给jsPlumb设⼀些默认值，然后声明⼀个exampleDropOptions变量。Defaults({ DragOptions : { cursor: 'pointer'}, //拖动时⿏标停留在该元素上显⽰指针，通过css控制 PaintStyle : { strokeStyle:'#666' },//元素的默认颜⾊ EndpointStyle : { width:20, height:16, strokeStyle:'#666' },//连接点的默认颜⾊ Endpoint : "Rectangle",//连接点的默认形状 Anchors : ["TopCenter"]//连接点的默认位置});var exampleDropOptions = { hoverClass:"dropHover",//释放时指定⿏标停留在该元素上使⽤的css class activeClass:"dragActive"//可拖动到的元素使⽤的css class};添加jsPlumb连接点然后声明两种类型的连接点。var color1 = "#316b31";

var exampleEndpoint1 = {

endpoint:["Dot", { radius:11 }],//设置连接点的形状为圆形 paintStyle:{ fillStyle:color1 },//设置连接点的颜⾊ isSource:true, //是否可以拖动（作为连线起点） scope:"green dot",//连接点的标识符，只有标识符相同的连接点才能连接 connectorStyle:{ strokeStyle:color1, lineWidth:6 },//连线颜⾊、粗细 connector: ["Bezier", { curviness:63 } ],//设置连线为贝塞尔曲线 maxConnections:1,//设置连接点最多可以连接⼏条线 isTarget:true, //是否可以放置（作为连线终点） dropOptions : exampleDropOptions//设置放置相关的css};var color2 = "rgba(229,219,61,0.5)";var exampleEndpoint2 = { endpoint:"Rectangle", //设置连接点的形状为矩形 anchor:"BottomLeft", //设置连接点的位置，左下⾓ paintStyle:{ fillStyle:color2, opacity:0.5 }, //设置连接点的颜⾊、透明度 isSource:true, //同上 scope:'yellow dot', //同上 connectorStyle:{ strokeStyle:color2, lineWidth:4},//同上 connector : "Straight", //设置连线为直线 isTarget:true, //同上 maxConnections:3,//同上 dropOptions : exampleDropOptions,//同上 beforeDetach:function(conn) { //绑定⼀个函数，在连线前弹出确认框 return confirm("Detach connection?"); }, onMaxConnections:function(info) {//绑定⼀个函数，当到达最⼤连接个数时弹出提⽰框 alert("Cannot drop connection " + + " : maxConnections has been reached on Endpoint " + ); }};将连接点绑定到html元素上var anchors = [[1, 0.2, 1, 0], [0.8, 1, 0, 1], [0, 0.8, -1, 0], [0.2, 0, 0, -1] ], maxConnectionsCallback = function(info) { alert("Cannot drop connection " + + " : maxConnections has been reached on Endpoint " + ); };var e1 = point("state2", { anchor:"LeftMiddle" }, exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state2的元素上("maxConnections", maxConnectionsCallback);//也可以在加到元素上之后绑定函数point("state1", exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state1的元素上point("state3", exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state3的元素上point("state1", {anchor:anchors}, exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state1的元素上，指定活动连接点需要注意的是连接点分为动态连接点和静态连接点。当指定⼀个数组作为连接点时，该连接点为动态连接点，连线时会⾃动选择最近的连接点连接；当指定⼀个坐标或者固定位置（TopRight、RightMiddle等）作为连接点时，该连接点为静态连接点，不管怎么连线都不会移动。具体可参见 。Html和CSS代码

html部分仅声明三个div，注意，jsPlumb通过id来识别html元素，因此如果要使⽤jsPlumb连线必须声明id。最终效果到此我们就完成了⼀个简单的jsPlumb连线⽰例，⼤家可以在浏览器中运⾏⼀下看看效果。源码可以在 下载。 进⼀步学习本⽂中的例⼦参考了Emiel的教程 以及官⽅Demo DraggableConnections，⼤家也可以看⼀看。由于篇幅限制，本⽂并未对jsPlumb的所有特性及功能进⾏说明，⼤家可以通过官⽹进⾏更深⼊的学习。不过个⼈认为官⽅⽂档⽐较难读，建议⼤家可以结合官⽹的Demo学习，Demo源码可以在GitHub上下载到。Demo：官⽅⽂档：API：第⼀次发教程，如果对⼤家有⽤的话，还希望能留⾔⽀持⼀下。有任何问题也欢迎⼤家⼀块交流探讨。转载请注明出处，谢谢！