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.<script type="text/javascript" src="leapis/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
2.<script type="text/javascript" src="leapis/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] view plaincopy
1.ady(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.jquery学习在线教程 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 " +&tion.id + " : maxConnections has been reached on Endpoint " +&dpoint.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] ],
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论