jsPlumb（1） - 开始使用
jsPlumb
jsPlumb社区版本为开发者在他们的网页上提供可视化的元素连接。在现代的浏览器使用SVG，在IE8和以下版本使用VML。
jsPlumb没有额外的依赖。
加载和配置
几种jsPlumb实例化的方式
jsPlumb默认是注册在浏览器的窗口（window）的，为整个页面提供静态实例。你也可以单独实例化，使用getInstance 模块，例如
var firstInstance = jsPlumb.getInstance();
变量firstInstance现在和jsPlumb变量一样使用，你可以使用importDefault设置默认参数，调用connect函数：
firstInstance.importDefaults({ Connector : [ "Bezier", { curviness: 150 } ], Anchors : [ "TopCenter", "BottomCenter" ]});firstInstance.connect({ source:"element1", target:"element2", scope:"someScope" });getInstance也可以带参数
var secondInstance = jsPlumb.getInstance({ PaintStyle:{ lineWidth:6, strokeStyle:"#567567", outlineColor:"black", outlineWidth:1 }, Connector:[ "Bezier", { curviness: 30 } ], Endpoint:[ "Dot", { radius:5 } ], EndpointStyle : { fillStyle: "#567567" }, Anchor : [ 0.5, 0.5, 1, 1 ]});secondInstance.connect({ source:"element4", target:"element3", scope:"someScope" });建议自己进行实例化。
元素ID
jsPlumb通过id和元素交互，如果id没有设置，jsPlumb会自动设置一个。建议用户自己设置。
管理元素id
因为jsp通过id管理元素，所以你得通知jsPlumb元素id的变化，
*jsPlumb.setId(el, newId)设置jsPlumb中的元素id
*jsPlumb.setIdChanged(oldId, newId)改变已有jsPlumb中的元素id
方法参数
jsPlumb中大多数方法提供多种对指定元素进行操作的格式。
选择器/节点列表
jQuery中又选择器的概念，例如$('.myClass')。在jsPlumb中同样适用。
jsPlumb也提供NodeList，有几种方式从DOM获取到NodeList，最好用的方法是document.querySelectorAll("some selector")
元素ids
元素s
数组s
关于Z轴
使用jsPlumb时，你需要考虑UI部分的z-indices（Z指数），特别是不要让jsPlumb添加到DOM上的元素不要遮盖其他元素的交互。
jsPlumb为Endpoint, Connector and Overlay添加一个元素到DOM上。到目前为止，一个Connection在每个终点都有Endpoint，在中间有一个标签（label），jsPlumb添加四个元素，实际添加的元素取决于渲染器使用的是（SVG还是VML）。
为了让你能正确地组织z参数，jsPlumb给每个元素添加了CSS类，如下
Component Class
Endpoint _jsPlumb_endpoint
Connector _jsPlumb_connector
Overlay _jsPlumb_overlay
另外，无论什么时候，当鼠标经过Endpoint或Connection上时，都会触发_jsPlumb_hover这个类。关于jsPlumb CSS更多类的信息，访问 this page
jsPlumb在哪儿添加元素？
知道jsPlumb把新加的元素放在DOM的哪里很重要。如果你想要个简介的版本（TL;DR（too long, didn’t read）），归纳如下：
强烈建议在使用jsPlumb前设置一个容器（Container）
容器就是你用来和jsPlumb添加的元素交互的一个母元素。
如果你没有指定一个容器，jsPlumb会推断你调用
addEndpoint、makeSource、makeTarget的方法的第一个元素的offsetParent，或者connect的source元素的offsetParent作为容器。
下面是详情：
早期版本的jsPlumb把body作为容器，好处是在支持那些可以连接（connect）的元素上很灵活，但是在一些具体案例中结果不是预期的。
设想一下，在标签里有几个连接在一起的元素，你想在表单里添加元素，让用户切换表单时当前的可以隐藏，那样所有的jsPlumb相关元素都会被隐藏掉。但是当元素都是在body上时，这就不会发生。
还有就是在一些元素里包含一个图表，在溢出时会显示滑动条，把元素添加到body可以避免这种事自动发生。
容器
你可以通过setContainer指定作为jsPlumb添加元素的容器，或者在jsPlumb.getInstance参数中指定。
重要：如果你使用了jsPlumb的draggable方法使你的UI可以拖拽（不止是通过jsPlumb添加的），会发生意外。建议使用另一个实例操作，如：
var nonPlumbing = jsPlumb.getInstance();nonPlumbing.draggable("some element");举个栗子
设置容器，使用jQuery选择机制，添加一个Endpoint，相关UI将作为document body的子元素：
jsPlumb.setContainer($("body")); jsPlumb.addEndpoint(someDiv, { endpoint options });通过DOM
jsPlumb.setContainer(document.getElementById("foo")); jsPlumb.addEndpoint(someDiv, { endpoint options });通过元素id
jsPlumb.setContainer("containerId"); jsPlumb.connect({ source:someDiv, target:someOtherDiv });`通过实例化
var j = jsPlumb.getInstance({ Container:"foo" }); jsPlumb.addEndpoint(someDiv, { endpoint options });
容器的CSS
你所选择的容器会有osition:relative,因为jsPlumb通过容器计算新元素添加的位置。
拖拽
使用jsPlumb交互，拖拽很常见，可以通过下面来实现：
myInstanceOfJsPlumb.draggable("elementId");
如果你不这么做的话，jsPlumb就不知道元素被拖拽了，就不能重新渲染页面。