jsPlumb basic tutorial directory
basic introduction
A brief introduction to some usages of jsplumb, and a detailed introduction to movingjsplumb Chinese basic tutorial.
Source node: Souce
Target node: Target
Anchor: Anchor
Endpoint: Endpoint
Connector
API introduction
Connect two nodes
<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>
Draggable nodes
<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>
Add arrows to connections
The arrow is actually set by setting overlays or connectorOverlays. You can set the length, width and position of the arrow. Location 0.5 means the arrow is in the middle, and location 1 means the arrow is set at the end of the connection. Multiple arrows can be added to one connection.
A configurable arrow: Arrow
A label that can display text information on the link: Label
A primitive type of arrow: PlainArrow
Diamond
Custom type: 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)
add an endpoint
The addEndpoint method can be used to add endpoints
jsPlumb.ready(function () {
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
})
})
Drag endpoints to connect
If you set isSource and isTarget to true, you can automatically create links when the user drags.
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)
})
Generally speaking, if you drag the link created, you can drag it again to break the link. If you don't want to trigger this behavior, you can set
jsPlumb.importDefaults({
ConnectionsDetachable: false
})
Add a click event to the link: click to delete the connection
// 请单点击一下连接线,
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
Specify endpoint connection
After initializing the data, add endPoint to the node. If you want to code the endPoint, connect it. When you need to use the addEndpoint method, add a uuid to the breakpoint, and then connect the two breakpoints through the connect() method. It is recommended to use node-uuid to add a unique uuid to each breakpoint, so that the link is much more convenient.
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)
Drag one endpoint to draw multiple connections
By default, the value of maxConnections is 1, which means that an endpoint can only pull out at most one connection.
You can also set it to other values, such as 5, which means there can be up to 5 connections.
If you want to not limit the number of connections, you can set this value to -1.
var common = {
isSource: true,
isTarget: true,
connector: ['Straight'],
maxConnections: -1
}
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
}, common)