前言
jsplumb 有2个版本：
- Toolkit Edition（付费版），功能集成的比较丰富，demo完善
- Community Edition（社区版本），很多功能都没有，需要自己添加
最终我用的Community Edition，因为不收费。
推荐大家结合 jsplumb 中文基础教程和官方文档一起学习。
浏览器兼容性
1.7.x版本是支持IE8的最后版本。从2.0.0版本开始，最低支持IE9，社区版仅适用于支持SVG的现代浏览器。
安装jsPlumb
npm install jsplumb
初始化jsPlumb
在DOM初始化之前，不应该调用jsPlumb。应该绑定到jsPlumb 上的事件ready上（或正在使用的jsPlumb的实例）：
import { jsPlumb } from 'jsplumb' //react中引入jsplumb
//componentDidMount生命周期中调用jsplumb
componentDidMount() {
jsPlumb.bind("ready", function() {
...
// your jsPlumb related init code goes here
...
});
}
或者
import { jsPlumb } from 'jsplumb' //react中引入jsplumb
//componentDidMount生命周期中调用jsplumb
componentDidMount() {
jsPlumb.ready(function() {
...
// your jsPlumb related init code goes here
...
});
}
ready在jsPlumb初始化之后绑定，会立即执行回调。
多个jsPlumb实例
默认情况，jsPlumb在浏览器窗口中注册，为整个页面提供一个静态实例。还可以使用该getInstance方法生成jsPlumb的单独实例，例如：
var jsPlumbInstance = jsPlumb.getInstance();
建议尽可能使用jsPlumb的单独实例。
接下来就可以使用jsPlumbInstance：
jsPlumbInstance.importDefaults({
Connector : [ "Bezier", { curviness: 150 } ],
Anchors : [ "TopCenter", "BottomCenter" ]
});
jsPlumbInstance.connect({
source:"element1",
target:"element2",
scope:"someScope"
});
元素ID
jsPlumb使用id属性来操作元素。如果id未设置，jsPlumb将为元素创建一个id。建议开发时为UI中的元素设置适当的id。
容器
容器是节点可以拖拽的区域。
有三种方式设置：
//方法一：设置id为foo的元素为容器
jsPlumbInstance.setContainer(document.getElementById("foo"));
//方法二：设置id为containerId的元素为容器
jsPlumbInstance.setContainer("containerId");
//方法三：设置id为foo的元素为容器
var jsPlumbInstance = jsPlumb.getInstance({
Container: "foo"
});
注：设置容器的position属性为relative，因为jsPlumb使用绝对定位，jsPlumb相对于容器设置元素位置。
设置节点可拖拽
jsPlumbInstance.draggable("elementId");
注：必须设置节点position属性为absolute
建议：看完这篇文章后，下载jsplumb文件，打开demo，边看demo边看下面的文章，遇到不知道的api去查看，效率更高。
下一篇：拓扑图编辑器-jsplum基本配置
网友评论