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

JavaScript020

使用jsPlumb插件实现动态连线功能,第1张

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

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

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

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

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

初始化连接锚点

//自动连线

设置一个带border的div，对象A在

mousedown

的时候监听

mousemove

事件，根据鼠标的位移来设置其宽度，mouseup的时候，移除mousemove事件。