JQuery_JavaScript_plugjsPlumb.js UI连线插件使用

来源：互联网发布：淘宝中老年秋冬季服装编辑：程序博客网时间：2024/04/29 07:22
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>
后续研究....待更新...
0 0
JQuery_JavaScript___plug__jsPlumb.js UI连线插件使用

所需三个js文件：

效果图

代码：

JQuery_JavaScript_plugjsPlumb.js UI连线插件使用
