jsplumb介绍

三．链接(Connections)

1.基本链接(Programmatic Connections)

a. 最简单的链接，你可用这样写

在这个例子中，我们已经创建了“element1的”element2的“连接。 请记住，在jsPlumb中连接是靠两个端点，连接器，和零个或多个覆盖物重叠组成，但是，这

个实例的“连接”没有提供这些东西，所以jsPlumb在需要这些的地方都用的是默认值，这些默认值是：

--链接的两个端点，jsPlumb默认使用的是Dot点端点，半径10，填充颜色#456 --链接的两个端点的锚，也是用的是默认值

--设定两个端点是否可被用来做为新的链接点，默认值为false --链接器的类型和外观，默认值是贝塞尔曲线，宽度8，颜色#456 所以这个链接是： 一个8px的贝塞尔曲线，从一个端点(element1)的bottomCenter移到另一个端点的bottomCenter，而且每一个端点的都是以10px为半径，#456为颜色的Dot点，

b. 让我们稍微加强一点这个链接，并且告诉jsPlumb我们想要什么，如图：

具体样式…就不介绍了，自己看图。 c. 重用jsPlumb的链接设置

一种非常常见的情况，比如你想要同一个设置，来创造多个链接，jsPlumb connect

有两个参数

2.使用拖放的链接(Programmatic Connections)

如果需要链接支持拖放，你首先需要进行一下设置，每一个需要支持拖放的链接，至少需要一个终结点，这里给一个实例，展示怎样去创建Endpoint

此端点将作为连接的资源，任何来自他的链接都将使用jsPlumb默认的样式作为自己的样式

Tip:一些常用的数据使用三个参数的addEndPoint方法

经常发生的一件事：你有一个端点，他的样式和其他的端点只有一点点区别，大多数都是一样的，这样的情况下，你可以定义个相同的样式，有不同的样式可以单独立出来，如下图，注意下anchor设置，两个元素是不一致的：

现在你有一个源端点，你需要在其他元素上创建一个终结点，或者通知jsPlumb你需要使整个元素成为一个拖拽的目标，让我们看看怎样去创建这样一个端点：

还有另外一个方法，jsPlumb.makeTarget()，这个方法需要两个参数，第一个参数是指需要设定的元素，或者元素列表，第二个参数是指当一个链接建立时你需要的端点，在这个例子中，我们用我们之前就用过的端点，-the gray Rentangle—但是我们需要告诉

jsPlumb,元素” aTargetDiv”将会被作为dorp的端点：

在jsPlumb中方法jsPlumb.addEndpoint 和方法jsPlumb.makeTarget，对象

endpointOptions里面的参数都是一样可以用的，你可以在端点终结点设置很多东西，这个你可以参见api列表说明。下面的示例显示了指定的箭头在链接拖动到终结点的连接线的一半的地方

下面这个示例展示的是，这个终结点，连接到它的连接线是依赖这个终结点的位置，因为它定义了好几个锚点，连接线会自动找到该终结点的动态锚：

3.”拖”选项(Drag Options）

这些拖动选项将通过jsPlumb api库来提供支持，jsPlumb将会提供你需要的一切，如果你需要一些拖动过程中的生命周期事件，你需要提供给jsPlumb一个通知方法，如果触发某个事件，它会调用该方法，比若说你需要在拖动开始时：

4.”放”选项(Drop Options)

Drop选项和Drag方式是一样的，用法可参见jquery用法 http://docs.jquery.com/UI/Droppable 5.”拖放”范围(域)( Drop Options)

jsPlumb借用了jquery里面drag/drop的范围概念，范围的概念是指那些可拖放的元素只能够被拖放到那些有范围的元素里面，在jsPlumb中你可以在创建EndPoint时创建一个范围”Scope”，下面给出一个例子：

如果你不提供一个”Scope”，jsPlumb将使用一个默认的范围，在这个方法中，这个值是可用的：

如果你因为某些原因想改变它的值，你可以这样做：

如果你想，你也可以这样，提供一个drap和drop的范围值：

四．外观

1.基本样式

定义端点、覆盖物(覆盖物现在更倾向于用cssClass来替代)、连接线的样式，这些样式是由paintStyle作为jsPlumb connect、jsPlumb.makeTarget、jsPlumb.addEndPoint方法的参数来定义的，根据你调用的不同方法，参数名称会不一样，具体不同如下面所列：

连接线样式

jsPlumb.connect: