2022年jsPlumb开发入门教程 .pdf

《2022年jsPlumb开发入门教程 .pdf》由会员分享，可在线阅读，更多相关《2022年jsPlumb开发入门教程 .pdf（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、- - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 8 页 - - - - - - - - - 浏览器兼容性在使用 jsPlumb 之前，大家需要先了解一下各浏览器对jsPlumb 的兼容性。jsPlumb 支持 IE6以上以及各大浏览器，但是仍然有一些bug：在 IE9 上，由于jQuery1.6.x和 1.7.x 的 SVG 相关实现有一个bug，会导致鼠标停留事件无法响应Safari5.1 上有一个 SVG 的 bug， 会导致鼠标事件无法通过SVG 元素的透明区域传递在 Firefox11 上基于 MooTools 使用 SVG 时会出现一

3、些问题下载和引入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。javascriptview plaincopy1. 2. 3. 初始化jsPlumb 只有等到 DOM

4、初始化完成之后才能使用，因此我们在以下代码中调用jsPlumb 方法javascriptview plaincopy名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 8 页 - - - - - - - - - 1.jsPlumb.ready(function() 2. 3./ some code4. 5.); 首先，我们给jsPlumb 设一些默认值，然后声明一个exampleDropOptions变量。plainview plaincopy1.jsPlumb.import

5、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,/

6、释放时指定鼠标停留在该元素上使用的css class 10. activeClass:dragActive/可拖动到的元素使用的css class 11.; 添加 jsPlumb 连接点然后声明两种类型的连接点。javascriptview plaincopy1.var color1 = #316b31; 2.var exampleEndpoint1 = 3. endpoint:Dot, radius:11 ,/ 设置连接点的形状为圆形4. paintStyle: fillStyle:color1 ,/ 设置连接点的颜色5. isSource:true , / 是否可以拖动（作为连线起点）6.

7、 scope:green dot, / 连接点的标识符，只有标识符相同的连接点才能连接7. connectorStyle: strokeStyle:color1, lineWidth:6 ,/ 连线颜色、粗细8. connector: Bezier, curviness:63 ,/ 设置连线为贝塞尔曲线9. maxConnections:1,/ 设置连接点最多可以连接几条线10. isTarget:true , / 是否可以放置（作为连线终点）11. dropOptions : exampleDropOptions/ 设置放置相关的css12.; 名师资料总结 - - -精品资料欢迎下载 -

8、- - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 8 页 - - - - - - - - - 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

9、: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 connec

10、tion?); 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 元素上javascriptview plaincopy1.var anchors = 1, 0.2, 1, 0, 0.8, 1, 0, 1, 0, 0.8, -1

11、, 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类型的点绑定到i

12、d 为 state2的元素上8.e1.bind(maxConnections, maxConnectionsCallback);/ 也可以在加到元素上之后绑定函数名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 8 页 - - - - - - - - - 9.10.jsPlumb.addEndpoint(state1, exampleEndpoint1);/ 将 exampleEndpoint1类型的点绑定到 id为 state1的元素上11.jsPlumb.addEndp

13、oint(state3, exampleEndpoint2);/ 将 exampleEndpoint2类型的点绑定到 id为 state3的元素上12.jsPlumb.addEndpoint(state1, anchor:anchors, exampleEndpoint2);/ 将exampleEndpoint2类型的点绑定到id 为 state1的元素上，指定活动连接点需要注意的是连接点分为动态连接点和静态连接点。当指定一个数组作为连接点时，该连接点为动态连接点，连线时会自动选择最近的连接点连接；当指定一个坐标或者固定位置（TopRight 、RightMiddle等）作为连接点时，该连接点

14、为静态连接点，不管怎么连线都不会移动。具体可参见官方文档 。Html 和 CSS代码htmlview plaincopy1.2.3.4.5.html 部分仅声明三个div， 注意，jsPlumb 通过 id 来识别 html 元素，因此如果要使用jsPlumb连线必须声明id。cssview plaincopy1. 2. .dragActive border:2px dotted orange; /当拖动一个连接点时， 可连接的连接点会自动使用该css 3. .dropHover border:1px dotted red; /当拖动一个连接点到可连接的点时，该点会自动使用该css 4. .i

15、tem 5.border: 1px solid black; 6.background-color: #ddddff; 7.width : 100px; 8.height: 100px; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 8 页 - - - - - - - - - 9.position: absolute; 10. 11.12. #state1 13. left: 100px; 14. top: 100px; 15. 16.17. #state2 18. l

16、eft: 250px; 19. top: 250px; 20. 21.22. #state3 23. left: 100px; 24. top: 250px; 25. 26. 最终效果到此我们就完成了一个简单的jsPlumb连线示例，大家可以在浏览器中运行一下看看效果。源码可以在 这里 下载。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 8 页 - - - - - - - - - 进一步学习本文中的例子参考了Emiel 的教程 Getting started with

17、jsPlumb以及官方Demo DraggableConnections，大家也可以看一看。由于篇幅限制，本文并未对jsPlumb 的所有特性及功能进行说明，大家可以通过官网进行更深入的学习。不过个人认为官方文档比较难读，建议大家可以结合官网的Demo 学习，Demo 源码可以在GitHub 上下载到。Demo ：http:/ http:/ 如果对大家有用的话，还希望能留言支持一下。有任何问题也欢迎大家一块交流探讨。个人博客： http:/ - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 8 页 - - - - - - - - - 本文地址： http:/ - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 8 页 - - - - - - - - -