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][/javascript] view plaincopy

  1. <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js”></script>
  2. <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js”></script>
  3. <script type=”text/javascript” src=”PATH_TO/jquery.jsPlumb-1.4.0-all-min.js “></script>

初始化

jsPlumb只有等到DOM初始化完成之后才能使用,因此我们在以下代码中调用jsPlumb方法
[javascript][/javascript] view plaincopy

  1. jsPlumb.ready(function() {
  2. // some code
  3. });

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

[plain][/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][/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 ” + info.connection.id + ” : maxConnections has been reached on Endpoint ” + info.endpoint.id);
  30.     }
  31. };

将连接点绑定到html元素上

[javascript][/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. var e1 = jsPlumb.addEndpoint(“state2″, { anchor:”LeftMiddle” }, exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state2的元素上
  6. e1.bind(“maxConnections”, maxConnectionsCallback);//也可以在加到元素上之后绑定函数
  7. jsPlumb.addEndpoint(“state1”, exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state1的元素上
  8. jsPlumb.addEndpoint(“state3”, exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state3的元素上
  9. jsPlumb.addEndpoint(“state1”, {anchor:anchors}, exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state1的元素上,指定活动连接点
需要注意的是连接点分为动态连接点和静态连接点。当指定一个数组作为连接点时,该连接点为动态连接点,连线时会自动选择最近的连接点连接;当指定一个坐标或者固定位置(TopRight、RightMiddle等)作为连接点时,该连接点为静态连接点,不管怎么连线都不会移动。具体可参见官方文档。

Html和CSS代码

[html][/html] view plaincopy

  1. <body>
  2. <div id=”state1″ class=”item”></div>
  3. <div id=”state2″ class=”item”></div>
  4. <div id=”state3″ class=”item”></div>
  5. </body>

html部分仅声明三个div,注意,jsPlumb通过id来识别html元素,因此如果要使用jsPlumb连线必须声明id。

[css][/css] view plaincopy

  1. <style type=”text/css”>
  2.     .dragActive { border:2px dotted orange; }   //当拖动一个连接点时,可连接的连接点会自动使用该css
  3.         .dropHover { border:1px dotted red; }       //当拖动一个连接点到可连接的点时,该点会自动使用该css
  4.         .item {
  5.             border: 1px solid black;
  6.             background-color: #ddddff;
  7.             width: 100px;
  8.             height: 100px;
  9.             position: absolute;
  10.         }
  11.         #state1 {
  12.             left: 100px;
  13.             top: 100px;
  14.         }
  15.         #state2 {
  16.             left: 250px;
  17.             top: 250px;
  18.         }
  19.         #state3 {
  20.             left: 100px;
  21.             top: 250px;
  22.         }
  23. </style>

最终效果

到此我们就完成了一个简单的jsPlumb连线示例,大家可以在浏览器中运行一下看看效果。

进一步学习

本文中的例子参考了Emiel的教程Getting started with jsPlumb以及官方Demo DraggableConnections,大家也可以看一看。
由于篇幅限制,本文并未对jsPlumb的所有特性及功能进行说明,大家可以通过官网进行更深入的学习。不过个人认为官方文档比较难读,建议大家可以结合官网的Demo学习,Demo源码可以在GitHub上下载到。
Demo:http://jsplumbtoolkit.com/jquery/demo.html
官方文档:http://jsplumbtoolkit.com/doc/home
API:http://jsplumbtoolkit.com/apidocs/files/jsPlumb-1.4.1-apidoc.html
第一次发教程,如果对大家有用的话,还希望能留言支持一下。有任何问题也欢迎大家一块交流探讨。
转载请注明出处,谢谢!

标签