這就是一個給元素畫連接線的工具。
<!DOCTYPE html>
<html>
<head>
<title>jsPlumb</title>
<style>
.item{
width:100px;
height:50px;
border:3px solid green;
position: absolute;
}
.item1{
left:400px;
top:100px;
}
.item2{
left:300px;
top:250px;
}
.item3{
left:500px;
top:250px;
}
.item4{
left:200px;
top:400px;
}
.item5{
left:400px;
top:400px;
}
.item6{
left:600px;
top:400px;
}
</style>
</head>
<body>
<div class='demo' id='demo'>
<div class='item item1' id='item1'>1</div>
<div class='item item2' id='item2'>2</div>
<div class='item item3' id='item3'>3</div>
<div class='item item4' id='item4'>4</div>
<div class='item item5' id='item5'>5</div>
<div class='item item6' id='item6'>6</div>
</div>
<script src="jquery-2.1.1.js"></script>
<script src="jquery-ui-1.9.2.js"></script>
<script src="jquery.jsPlumb-1.4.1-all.js"></script>
<script>
jsPlumb.ready(function(){
var color = '#222';
var instance = jsPlumb.getInstance({
//連線
Connector:['Bezier', {curviness:50}],
//拖動時的演示
DragOptions:{cursor:'pointer', zIndex:2000},
//連接線的樣式
PaintStyle:{strokeStyle:'steelblue', lineWidth:3},
//連接點的樣式
EndpointStyle:{radius:6, fillStyle:'#222'},
//hover時線樣式
HoverPaintStyle:{strokeStyle:'green'},
//hover時點的樣式
EndpointHoverStyle:{fillStyle:'red'},
Container:'demo' //Either an element id, a DOM element, or a selector from the underlying library
});
instance.doWhileSuspended(function(){
var arrowCommon = {foldback: .7, fillStyle: color, width: 14},
overlays = [
['Arrow', {location:.8}, arrowCommon],
// ['Arrow', {location:.3, direction:-1}, arrowCommon],
];
var windows = jsPlumb.getSelector('.item');
for(var i = 0; i<windows.length;i++){
instance.addEndpoint(windows[i], {
uuid:windows[i].getAttribute('id')+'-bottom',
anchor:'Bottom',
maxConnections:-1
});
instance.addEndpoint(windows[i], {
uuid:windows[i].getAttribute('id')+'-top',
anchor:'Top',
maxConnections:-1
});
}
//connect 函數
instance.connect({uuids:['item3-bottom','item6-top'], overlays:overlays, detachable:true, reattach:true});
instance.connect({uuids:['item1-bottom','item2-top'], overlays:overlays});
instance.connect({uuids:['item1-bottom','item3-top'], overlays:overlays});
instance.connect({uuids:['item2-bottom','item4-top'], overlays:overlays});
instance.connect({uuids:['item2-bottom','item5-top'], overlays:overlays});
//jquery ui里的draggable功能
instance.draggable(windows);
});
jsPlumb.fire('jsPlumbdemoLoaded', instance);
})
</script>
</body>
</html>
這是一個簡單的小例子。是官網中一個demo的簡化版，在學習了網上的教程之后，給官網的例子加了自己的注釋。
給元素加連接點，給連接點加連接線，給連接線加各種裝飾。需要的樣式，canvas和SVG中都有，需要的動作，就是拖動。