jsPlumb开发入门教程整理
导读： jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScr...
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。
jsPlumb只有等到DOM初始化完成之后才能使用，因此我们在以下代码中调用jsPlumb方法
首先，我们给jsPlumb设一些默认值，然后声明一个exampleDropOptions变量。
然后声明两种类型的连接点。
需要注意的是连接点分为动态连接点和静态连接点。当指定一个数组作为连接点时，该连接点为动态连接点，连线时会自动选择最近的连接点连接；当指定一个坐标或者固定位置（TopRight、RightMiddle等）作为连接点时，该连接点为静态连接点，不管怎么连线都不会移动。具体可参见
官方文档。
html部分仅声明三个div，注意，jsPlumb通过id来识别html元素，因此如果要使用jsPlumb连线必须声明id。
到此我们就完成了一个简单的jsPlumb连线示例，大家可以在浏览器中运行一下看看效果。源码可以在
这里下载。
本文中的例子参考了Emiel的教程
Getting started with jsPlumb以及官方Demo DraggableConnections，大家也可以看一看。
由于篇幅限制，本文并未对jsPlumb的所有特性及功能进行说明，大家可以通过官网进行更深入的学习。不过个人认为官方文档比较难读，建议大家可以结合官网的Demo学习，Demo源码可以在GitHub上下载到。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： jsPlumb开发入门教程整理
本文地址： https://pptw.com/jishu/661557.html