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

最新推荐文章于 2024-09-09 21:23:42 发布

cyerogy

最新推荐文章于 2024-09-09 21:23:42 发布

阅读量4.9k

点赞数

分类专栏： jsplump 文章标签：连线题 jsplump 链接源和目标

本文链接：https://blog.csdn.net/cyerogy/article/details/24796315

版权

jsplump 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>
//上面的三个js文件可以直接在jsplump官网上下载网址：https://github.com/sporritt/jsplumb/

 <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" οnclick="getinfo()" value="getinfo"></div>
</body>
</html>