这就是一个给元素画连接线的工具。
<!DOCTYPE html>
<html>
<head>
<title>jsPlumb</title>
<style>
.item{
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, 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中都有，需要的动作，就是拖动。