JsPlump连线

来源：互联网发布：linux 查看用户列表编辑：程序博客网时间：2024/04/27 15:25

JsPlump连线题并获取每个链接的source与target

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script><script type="text/javascript" src="jquery.jsPlumb-1.4.0-all-min.js "></script>//<span style="color:#FF0000;">上面的三个js文件可以直接在jsplump官网上下载网址：https://github.com/sporritt/jsplumb/</span>

 <style type="text/css">        #question,#answer{float: left;width: 300px;height: 600px;border: 1px solid red;}        #answer{margin-left: 20px}        .state_question{            width: 200px;            background: white;            border: 1px solid red;            margin-top: 20px;            height: 60px;            margin-left: 30px;        }    </style>    <script>    var list;        jsPlumb.ready(function() {            jsPlumb.importDefaults({            DragOptions : { cursor: 'pointer'}, //拖动时鼠标停留在该元素上显示指针，通过css控制            PaintStyle : { strokeStyle:'#666' },//元素的默认颜色            EndpointStyle : { width:20, height:16, strokeStyle:'#666' },//连接点的默认颜色            Endpoint : "Rectangle",//连接点的默认形状            Anchors : ["TopCenter"]//连接点的默认位置        });        var exampleDropOptions = {            hoverClass:"dropHover",//释放时指定鼠标停留在该元素上使用的css class            activeClass:"dragActive"//可拖动到的元素使用的css class        };        var color1 = "#676767";                             var exampleEndpoint1 = {                        endpoint:["Dot", { radius:11 }],//设置连接点的形状为圆形            paintStyle:{ fillStyle:color1 },//设置连接点的颜色            isSource:true,  //是否可以拖动（作为连线起点）            scope:"green dot",//连接点的标识符，只有标识符相同的连接点才能连接            connectorStyle:{ strokeStyle:color1, lineWidth:6 },//连线颜色、粗细            connector: "Straight",//设置连线为贝塞尔曲线            maxConnections:1,//设置连接点最多可以连接几条线            //isTarget:true,  //是否可以放置（作为连线终点）            dropOptions : exampleDropOptions//设置放置相关的css        };        var color2 = "#676767";        var exampleEndpoint2 = {            endpoint:["Dot", { radius:11 }],   //设置连接点的形状为矩形            anchor:"BottomLeft",    //设置连接点的位置，左下角            paintStyle:{ fillStyle:color2, opacity:0.5 },   //设置连接点的颜色、透明度            //isSource:true,  //同上            scope:'green dot', //同上            connectorStyle:{ strokeStyle:color2, lineWidth:4},//同上            connector : "Straight", //设置连线为直线            isTarget:true,  //同上            maxConnections:1,//同上            dropOptions : exampleDropOptions,//同上            beforeDetach:function(conn) {   //绑定一个函数，在连线前弹出确认框                return confirm("Detach connection?");            },            onMaxConnections:function(info) {//绑定一个函数，当到达最大连接个数时弹出提示框                alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);            }        };        //var e1 = jsPlumb.addEndpoint("state2", { anchor:"RightMiddle" }, exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state2的元素上        //e1.bind("maxConnections", maxConnectionsCallback);//也可以在加到元素上之后绑定函数        jsPlumb.addEndpoint("state2", { anchor:"RightMiddle" }, exampleEndpoint1);        jsPlumb.addEndpoint("state1",{ anchor:"RightMiddle" }, exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state1的元素上        jsPlumb.addEndpoint("state3", { anchor:"RightMiddle" }, exampleEndpoint1);//将exampleEndpoint2类型的点绑定到id为state3的元素上        jsPlumb.addEndpoint("state4", { anchor:"LeftMiddle" }, exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state4的元素上        jsPlumb.addEndpoint("state5",{ anchor:"LeftMiddle" }, exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state5的元素上        jsPlumb.addEndpoint("state6", { anchor:"LeftMiddle" }, exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state6的元素上       list=jsPlumb.getAllConnections();//获取所有的链接    });    function getinfo(){        for(var i in list){            for(var j in list[i]){                    alert(list[i][j]['sourceId']+"..............."+list[i][j]['targetId']);            }        }    }    </script></head><body><div id="question">    <div id="state1" class="state_question">1</div>    <div id="state2" class="state_question">2</div>    <div id="state3" class="state_question">3</div></div><div id="answer">    <div id="state4" class="state_question">4</div>    <div id="state5" class="state_question">5</div>    <div id="state6" class="state_question">6</div></div><div><input type="button" onclick="getinfo()" value="getinfo"></div></body></html>

使用1.7.x、1.8.x的jQuery UI，还需要额外引入jQuery UI Touch Punch。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script><script type="text/javascript" src="PATH_TO/jquery.jsPlumb-1.4.0-all-min.js "></script>

初始化

jsPlumb只有等到DOM初始化完成之后才能使用，因此我们在以下代码中调用jsPlumb方法

jsPlumb.ready(function() {...         // some code...});

首先，我们给jsPlumb设一些默认值，然后声明一个exampleDropOptions变量。

jsPlumb.importDefaults({    DragOptions : { cursor: 'pointer'},//拖动时鼠标停留在该元素上显示指针，通过css控制    PaintStyle : { strokeStyle:'#666' },//元素的默认颜色    EndpointStyle : { width:20, height:16, strokeStyle:'#666' },//连接点的默认颜色    Endpoint : "Rectangle",//连接点的默认形状    Anchors : ["TopCenter"]//连接点的默认位置});var exampleDropOptions = {    hoverClass:"dropHover",//释放时指定鼠标停留在该元素上使用的css class    activeClass:"dragActive"//可拖动到的元素使用的css class};

添加jsPlumb连接点

然后声明两种类型的连接点。

var color1 = "#316b31";var exampleEndpoint1 = {  endpoint:["Dot", { radius:11 }],//设置连接点的形状为圆形  paintStyle:{ fillStyle:color1 },//设置连接点的颜色  isSource:true,//是否可以拖动（作为连线起点）  scope:"green dot",//连接点的标识符，只有标识符相同的连接点才能连接  connectorStyle:{ strokeStyle:color1, lineWidth:6 },//连线颜色、粗细  connector: ["Bezier", { curviness:63 } ],//设置连线为贝塞尔曲线  maxConnections:1,//设置连接点最多可以连接几条线  isTarget:true,//是否可以放置（作为连线终点）  dropOptions : exampleDropOptions//设置放置相关的css};var color2 = "rgba(229,219,61,0.5)";var exampleEndpoint2 = {  endpoint:"Rectangle",//设置连接点的形状为矩形  anchor:"BottomLeft",//设置连接点的位置，左下角  paintStyle:{ fillStyle:color2, opacity:0.5 },//设置连接点的颜色、透明度  isSource:true,//同上  scope:'yellow dot',//同上  connectorStyle:{ strokeStyle:color2, lineWidth:4},//同上  connector : "Straight",//设置连线为直线  isTarget:true,//同上  maxConnections:3,//同上  dropOptions : exampleDropOptions,//同上  beforeDetach:function(conn) {//绑定一个函数，在连线前弹出确认框    return confirm("Detach connection?");  },  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的元素上，指定活动连接点

需要注意的是连接点分为动态连接点和静态连接点。当指定一个数组作为连接点时，该连接点为动态连接点，连线时会自动选择最近的连接点连接；当指定一个坐标或者固定位置（TopRight、RightMiddle等）作为连接点时，该连接点为静态连接点，不管怎么连线都不会移动。具体可参见官方文档。

Html和CSS代码

<body><div id="state1" class="item"></div><div id="state2" class="item"></div><div id="state3" class="item"></div></body>

html部分仅声明三个div，注意，jsPlumb通过id来识别html元素，因此如果要使用jsPlumb连线必须声明id。

<style type="text/css">  .dragActive { border:2px dotted orange; }//当拖动一个连接点时，可连接的连接点会自动使用该css        .dropHover { border:1px dotted red; }//当拖动一个连接点到可连接的点时，该点会自动使用该css        .item {            border: 1px solid black;            background-color: #ddddff;            width: 100px;            height: 100px;            position: absolute;        }        #state1 {            left: 100px;            top: 100px;        }        #state2 {            left: 250px;            top: 250px;        }        #state3 {            left: 100px;            top: 250px;        }</style>

最终效果

到此我们就完成了一个简单的jsPlumb连线示例，大家可以在浏览器中运行一下看看效果。

0 0