jsPlumb基础教程目录
基本介绍
简单介绍下jsplumb的一些用法，详细介绍移步jsplumb 中文基础教程。
源节点：Souce
目标节点：Target
锚点：Anchor
端点：Endpoint
连接：Connector
API介绍
连接两个节点
<div id="diagramContainer">
<div id="item_left" class="item"></div>
<div id="item_right" class="item" style="margin-left:50px;"></div>
</div>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
<script>
jsPlumb.ready(function () {
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
endpoint: 'Dot'
})
})
</script>
可拖动节点
<div id="diagramContainer">
<div id="item_left" class="item"></div>
<div id="item_right" class="item" style="left:150px;"></div>
</div>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
<script>
jsPlumb.ready(function () {
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
endpoint: 'Rectangle'
})
jsPlumb.draggable('item_left')
jsPlumb.draggable('item_right')
})
</script>
给连接加上箭头
箭头实际上是通过设置overlays或者connectorOverlays去设置的，可以设置箭头的长宽以及箭头的位置，location 0.5表示箭头位于中间，location 1表示箭头设置在连线末端。 一根连线是可以添加多个箭头的。
一个可配置的箭头：Arrow
标签，可以在链接上显示文字信息：Label
原始类型的箭头：PlainArrow
菱形箭头：Diamond
自定义类型：Custom
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
paintStyle: {
stroke: 'lightgray', strokeWidth: 3 },
endpointStyle: {
fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
overlays: [ ['Arrow', {
width: 12, length: 12, location: 0.5 }] ]
}, common)
增加一个端点
addEndpoint方法可以用来增加端点
jsPlumb.ready(function () {
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
})
})
拖动端点连线
如果你将isSource和isTarget设置成true，那么就可以用户在拖动时，自动创建链接。
jsPlumb.ready(function () {
jsPlumb.setContainer('diagramContainer')
var common = {
isSource: true,
isTarget: true,
connector: ['Straight']
}
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
}, common)
jsPlumb.addEndpoint('item_right', {
anchor: 'Left'
}, common)
jsPlumb.addEndpoint('item_right', {
anchor: 'Right'
}, common)
})
一般来说拖动创建的链接，可以再次拖动，让链接断开。如果不想触发这种行为，可以设置
jsPlumb.importDefaults({
ConnectionsDetachable: false
})
给链接添加点击事件：点击删除连线
// 请单点击一下连接线,
jsPlumb.bind('click', function (conn, originalEvent) {
if (window.prompt('确定删除所点击的链接吗？ 输入1确定') === '1') {
jsPlumb.detach(conn)
}
})
jsPlumb支持许多事件，如下：
connection
connectionDetached
connectionMoved
click
dblclick
endpointClick
endpointDblClick
contextmenu
beforeDrop
beforeDetach
zoom
Connection Events
Endpoint Events
Overlay Events
Unbinding Events
指定端点连接
初始化数据后，给节点加上了endPoint, 如果想编码让endPoint连接上。需要在addEndpoint方法时，就给该断点加上一个uuid, 然后通过connect()方法，将两个断点链接上。建议使用node-uuid给每个断点都加上唯一的uuid， 这样链接就方便多了。
jsPlumb.addEndpoint('item_left', {
anchors: ['Right'],
uuid: 'fromId'
})
jsPlumb.addEndpoint('item_right', {
anchors: ['Left'],
uuid: 'toId'
})
console.log('3 秒后建立连线')
setTimeout(function () {
jsPlumb.connect({
uuids: ['fromId', 'toId'] })
}, 3000)
一个端点拖拽出多条连线
默认情况下，maxConnections的值是1，也就是一个端点最多只能拉出一条连线。
你也可以设置成其他值，例如5，表示最多可以有5条连线。
如果你想不限制连线的数量，那么可以将该值设置为-1。
var common = {
isSource: true,
isTarget: true,
connector: ['Straight'],
maxConnections: -1
}
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
}, common)