使用jsPlumb插件实现动态连线功能

这周去看了两天的羽毛球亚锦赛，工作有提前晚上加班做一些，但是技术文章却拉下了。

这段时间一直在寻找可以实现前端元素动态连线的功能，找了好几个库，考虑过用d3或者原生svg和canvas来实现，最后和同项目的同事商量后决定使用jsPlumb插件库来做。

jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，其实jsPlumb可能主要是用来做流程图的，它在实现这方面的功能上非常强大，我在项目中只使用了它少部分功能，来实现项目中连线的效果。

以上是初始化jsPlumb对象的函数。

接下来获取数据，加载页面的系统和编制模块。

初始化连接锚点

//自动连线

jsPlumb支持绑定到Connections，Endpoints和Overlays上的几个不同事件，以及jsPlumb对象本身。

要在jsPlumb本身（或jsPlumb实例）上绑定事件，请使用jsPlumb.bind(event, callback)

可以在jsPlumb类上绑定的事件：

info具有的属性：

originalEvent：建立连接的原始鼠标事件。

注： jsPlumb.connect或者鼠标连线时触发此事件

info具有的属性：

连接到某个节点之前放弃新拖动的Connection时不会触发此事件，可以使用connectionAborted捕获。

originalEvent：断开连接的原始鼠标事件。

info具有的属性：

注：当此事件触发时，连接的目标端点是jsPlumb用于拖动的瞬态元素，随后在建立或中止连接时将从DOM中删除。

info具有的属性：

beforeDrag 与其他拦截器的 *** 作略有不同：从拦截器函数返回false将取消当前拖动，也可以从拦截器返回一个对象，此对象将作为 data 被传进新连接的构造函数中:

如果已定义参数化连接类型，此功能特别有用。使用此机制，可以使用选择的数据填充新拖动的连接。

注: 1.7.6之前的所有jsPlumb版本，新的连接拖动以及拖动现有的连接都会触发beforeDetach。从1.7.6开始，后一种行为已被移至 beforeStartDetach拦截器。

返回false，取消拖动。

绑定到Connection上的事件，还可以使用以下bind方法：

这些是可以绑定到连线事件：

绑定到端点上的事件，使用以下bind方法：

这些是可以绑定到端点的事件：

在Overlay上注册事件侦听器是一个稍微不同的过程 - 将它们作为Overlay构造函数的参数。

以下是在Overlay上注册点击监听器的方法：

在jsPlumb对象以及Connections和Endpoints上，可以使用unbind方法删除监听器。

下一篇：拓扑图编辑器-实现过程

在设置默认的时候，有个参数Connector: "Flowchart"，这里的Flowchart就是样式。Bezier是贝塞尔曲线，连线就是曲线，Straight 是直线，Flowchart是流程图，State Machine是状态机

---