JQuery_JavaScript___plug__jsPlumb.js UI连线插件使用
GitHub地址：https://github.com/xiaohulu/util_xiaohulu/tree/master/web/plug_in/jsPlumb_
所需三个js文件：
效果图
代码：
<!DOCTYPE html>
<html>
<head>
<script src="jsPlumb_files/jquery-1.9.0.js"></script>
<script src="jsPlumb_files/jquery-ui-1.9.2-min.js"></script>
<script src="jsPlumb_files/jquery.jsPlumb-1.4.0-all.js"></script>
<title>jsPlumb_demo</title>
<meta charset="UTF-8">
<style type="text/css">
/**当拖动一个连接点时，可连接的连接点会自动使用该css**/
.dragActive {
border: 2px dotted orange;
}
/**当拖动一个连接点到可连接的点时，该点会自动使用该css**/
.dropHover {
border: 1px dotted red;
}
.item {
border: 1px solid black;
background-color: #ddddff;
width: 100px;
height: 100px;
position: absolute;
}
#state1 {
left: 100px;
top: 100px;
}
#state2 {
left: 350px;
top: 150px;
}
#state3 {
left: 100px;
top: 350px;
}
#state4 {
left: 300px;
top: 350px;
}
</style>
<script>
//初始化
jsPlumb.ready(function () {
//首先，我们给jsPlumb设一些默认值，然后声明一个exampleDropOptions变量。
jsPlumb.importDefaults({
DragOptions: { cursor: 'pointer'}, //拖动时鼠标停留在该元素上显示指针，通过css控制
PaintStyle: { strokeStyle: '#666' },//元素的默认颜色
EndpointStyle: { width: 20, height: 16, strokeStyle: '#567567' },//连接点的默认颜色
Endpoint: [ "Dot", { radius: 5 } ],//连接点的默认形状
Connector: [ "Bezier", { curviness: 150 } ],
Anchors: [ "TopCenter", "BottomCenter" ],//连接点的默认位置
ConnectionOverlays: [//连接覆盖图
["Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 1
}],
["Label", {
location: 0.5,
id: "label",
cssClass: "aLabel"
}]
]
});
var exampleDropOptions = {
hoverClass: "dropHover",//释放时指定鼠标停留在该元素上使用的css class
activeClass: "dragActive"//可拖动到的元素使用的css class
};
// 绑定到连接/ connectionDetached事件,和更新的列表在屏幕上的连接。
jsPlumb.bind("connection", function (info, originalEvent) {
updateConnections(info.connection);
});
jsPlumb.bind("connectionDetached", function (info, originalEvent) {
updateConnections(info.connection, true);
});
function updateConnections(info) {
alert("连接线ID:" + info.id + "\n连接线sourceID:" + info.sourceId + "\n连接线targetID:" + info.targetId);
alert(info.endpoints[0].getUuid().substr(info.endpoints[0].getUuid().indexOf('-') + 1));
}
//添加jsPlumb连接点
var color1 = "#316b31";
var exampleEndpoint1 = {
endpoint: ["Dot", { radius: 5 }],//设置连接点的形状为圆形
paintStyle: { fillStyle: color1 },//设置连接点的颜色
isSource: true, //是否可以拖动（作为连线起点）
scope: "green dot",//连接点的标识符，只有标识符相同的连接点才能连接
connectorStyle: { strokeStyle: color1, lineWidth: 6 },//连线颜色、粗细
connector: ["Bezier", { curviness: 10 } ],//设置连线为贝塞尔曲线
maxConnections: 1,//设置连接点最多可以连接几条线
isTarget: true, //是否可以放置（作为连线终点）
dropOptions: exampleDropOptions//设置放置相关的css
};
var color2 = "rgba(229,219,61,0.5)";
var exampleEndpoint2 = {
endpoint: "Rectangle", //设置连接点的形状为矩形
paintStyle: {//设置连接点的大小、颜色、透明度
width: 25,
height: 21,
fillStyle: "red",
opacity: 0.5
},
anchor: "BottomLeft", //设置连接点的位置，左下角
isSource: true, //是否可以拖动（作为连线起点）
scope: 'yellow dot', //连接点的标识符，只有标识符相同的连接点才能连接
connectorStyle: { strokeStyle: color2, lineWidth: 4},//连线颜色、粗细
//connector: "Straight", //设置连线为直线
connector: "Flowchart",//设置为流程图线
isTarget: true,//是否可以放置（作为连线终点）
maxConnections: 3,//设置连接点最多可以连接几条线 [-1为无限制]
dropOptions: exampleDropOptions,//设置放置相关的css
beforeDetach: function (conn) { //绑定一个函数，在连线前弹出确认框
return confirm("断开连接?");
},
onMaxConnections: function (info) {//绑定一个函数，当到达最大连接个数时弹出提示框
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
}
};
var exampleEndpoint3 = {
endpoint: "Rectangle", //设置连接点的形状为矩形
paintStyle: {//设置连接点的大小、颜色、透明度
width: 25,
height: 21,
fillStyle: "blue",
opacity: 0.5
},
anchor: "BottomLeft", //设置连接点的位置，左下角
isSource: true, //是否可以拖动（作为连线起点）
scope: 'blue dot', //连接点的标识符，只有标识符相同的连接点才能连接
connectorStyle: { strokeStyle: color2, lineWidth: 4},//连线颜色、粗细
//connector: "Straight", //设置连线为直线
connector: "Flowchart",//设置为流程图线
isTarget: true,//是否可以放置（作为连线终点）
maxConnections: -1,//设置连接点最多可以连接几条线 [-1为无限制]
dropOptions: exampleDropOptions,//设置放置相关的css
beforeDetach: function (conn) { //绑定一个函数，在连线前弹出确认框
return confirm("断开连接?");
},
onMaxConnections: function (info) {//绑定一个函数，当到达最大连接个数时弹出提示框
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
}
};
//将连接点绑定到html元素上
var anchors = [
[1, 0.2, 1, 0],
[0.8, 1, 0, 1],
[0, 0.8, -1, 0],
[0.2, 0, 0, -1]
],
maxConnectionsCallback = function (info) {
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
};
var e1 = jsPlumb.addEndpoint("state2", { anchor: "LeftMiddle" }, exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state2的元素上
e1.bind("maxConnections", maxConnectionsCallback);//也可以在加到元素上之后绑定函数
jsPlumb.addEndpoint("state1", exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state1的元素上
jsPlumb.addEndpoint("state3", exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state3的元素上
jsPlumb.addEndpoint("state1", {anchor: anchors}, exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state1的元素上，指定活动连接点
jsPlumb.addEndpoint("state3", {anchor: anchors}, exampleEndpoint3);//将exampleEndpoint2类型的点绑定到id为state1的元素上，指定活动连接点
jsPlumb.addEndpoint("state4", {anchor: anchors}, exampleEndpoint3);//将exampleEndpoint2类型的点绑定到id为state1的元素上，指定活动连接点
//设置连接线
jsPlumb.connect({
source: "state3",
target: "state2"
});
});
</script>
</head>
<body>
//html部分仅声明三个div，注意，jsPlumb通过id来识别html元素，因此如果要使用jsPlumb连线必须声明id。
<div id="state1" class="item">state1</div>
<div id="state2" class="item">state2</div>
<div id="state3" class="item">state3</div>
<div id="state4" class="item">state4</div>
</body>
</html>
后续研究....待更新...