本文主要是介绍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 classactiveClass: "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,//设置放置相关的cssbeforeDetach: 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,//设置放置相关的cssbeforeDetach: 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>后续研究....待更新...
这篇关于JQuery_JavaScript___plug__jsPlumb.js UI连线插件使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
