jsPlumb基础教程目录
- 基本介绍
- API介绍
- 连接两个节点
- 可拖动节点
- 给连接加上箭头
- 增加一个端点
- 拖动端点连线
- 给链接添加点击事件:点击删除连线
- 指定端点连接
- 一个端点拖拽出多条连线
基本介绍
简单介绍下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)