JsPlum样例

最新推荐文章于 2020-10-15 16:42:59 发布
cihongmo6452
最新推荐文章于 2020-10-15 16:42:59 发布
阅读量215
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/sniperLi/blog/496959
版权
JsPlum样例，含有多个点连接，双向箭头等
<!DOCTYPE html>
<html>
<head>
    <script src="jquery-1.9.0.js"></script>
    <script src="jquery-ui-1.9.2-min.js"></script>
    <script src="jquery.jsPlumb-1.4.0-all.js"></script>
    <style type="text/css">
        .dragActive { border:2px dotted orange; }
        .dropHover { border:1px dotted red; }
        .w {
            border: 1px solid black;
            background-color: #ddddff;
            width: 80px;
            height: 60px;
            position: absolute;
        }
    .item {
        padding: 16px;
        position: absolute;
        z-index: 4;
        border: 1px solid #2e6f9a;
        box-shadow: 2px 2px 19px #e0e0e0;
        -o-box-shadow: 2px 2px 19px #e0e0e0;
        -webkit-box-shadow: 2px 2px 19px #e0e0e0;
        -moz-box-shadow: 2px 2px 19px #e0e0e0;
        -moz-border-radius: 8px;
        border-radius: 8px;
        opacity: 0.8;
        filter: alpha(opacity=80);
        cursor: move;
        background-color: white;
        font-size: 11px;
        -webkit-transition: background-color 0.25s ease-in;
        -moz-transition: background-color 0.25s ease-in;
        transition: background-color 0.25s ease-in;
        background-color: #ddddff;
    }
    
    /* 人口 begin */
        #jx_rk {
            left: 100px;
            top: 50px;
        }
        #sqy_rk {
            left: 100px;
            top: 150px;
        }
        #wb_rk {
            left: 100px;
            top: 250px;
        }
        
        
        #rk_1 {
            left: 350px;
            top: 150px;
        }
        
        #rk_2 {
            left: 600px;
            top: 150px;
        }
        
        #rk_3 {
            left: 850px;
            top: 150px;
        }
        /* 人口 end */
        
        #fr_3 {
            left: 850px;
            top: 450px;
        }
        
    </style>
    <script>
        jsPlumb.ready(function() {
            jsPlumb.importDefaults({
                DragOptions : { cursor: 'pointer', zIndex:2000 },
                PaintStyle : { strokeStyle:'#666' },
                EndpointStyle : { width:20, height:16, strokeStyle:'#666' },
                Endpoint : "Rectangle",
                Anchors : ["TopCenter"],
                ConnectionOverlays: [
               [ "Arrow", {
                   location: 1,
                   id: "arrow",
                   //length: 14,
                   foldback: 0.7,
                   width: 14
               } ],
               [ "Label", { label: "line", id: "label", cssClass: "aLabel" }]
           ]
            });
            var exampleDropOptions = {
                hoverClass:"dropHover",
                activeClass:"dragActive"
            };
      
            var color1 = "#7AB02C";
            //var color1 = "#ffa500";
            
            //人口 start
            var jx_rk = {
              uuid:"jx_rk",
              anchor:"RightMiddle",//连接点的位置，可以被覆盖
                endpoint:["Dot", { radius:6 }],//连接点的形状、大小
                paintStyle:{ fillStyle:color1 },//连接点的颜色
                isSource:true,
                scope:"green dot",//点击该颜色的时候，其余该颜色的点都会显示虚线框
                connectorStyle:{ strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },//点与点之间连线颜色
                connector : "Straight",//线条形状，直线
                maxConnections:1,
                isTarget:true,
                dropOptions : { hoverClass: "dropHover", activeClass: "dragActive" },
                overlays: [
                  [ "Label", {
                      location: [0.5, 1.5],
                      label: "",
                      cssClass: "endpointSourceLabel"
                  }]
              ]
            };
            
            var sqy_rk = {
              uuid:"sqy_rk",
              anchor:"RightMiddle",//连接点的位置，可以被覆盖
                endpoint:["Dot", { radius:6 }],//连接点的形状、大小
                paintStyle:{ fillStyle:color1 },//连接点的颜色
                isSource:true,
                scope:"green dot",//点击该颜色的时候，其余该颜色的点都会显示虚线框
                connectorStyle:{ strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },//点与点之间连线颜色
                connector : "Straight",//线条形状，直线
                maxConnections:1,
                isTarget:true,
                dropOptions : exampleDropOptions,
                overlays: [
                  [ "Label", {
                      location: [0.5, 1.5],
                      label: "",
                      cssClass: "endpointSourceLabel"
                  } ]
              ]
            };
            
            var rk_1_1 = {
              uuid:"rk_1_1",
              anchor:"LeftMiddle",//连接点的位置，可以被覆盖
                endpoint:["Dot", { radius:6 }],//连接点的形状、大小
                paintStyle:{ fillStyle:color1 },//连接点的颜色
                isSource:true,
                scope:"green dot",//点击该颜色的时候，其余该颜色的点都会显示虚线框
                connectorStyle:{ strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },//点与点之间连线颜色
                connector : "Straight",//线条形状，直线
                maxConnections:-1,
                isTarget:true,
                dropOptions : exampleDropOptions
            };
            
            
            var rk_1_1_1 = {
              uuid:"rk_1_1_1",
                endpoint:["Dot", { radius:6 }],//连接点的形状、大小
                paintStyle:{ fillStyle:color1 },//连接点的颜色
                isSource:true,
                scope:"green dot",//点击该颜色的时候，其余该颜色的点都会显示虚线框
                connectorStyle:{ strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },//点与点之间连线颜色
                connector : "Straight",//线条形状，直线
                maxConnections:-1,
                isTarget:true,
                dropOptions : exampleDropOptions
            };
            
            var rk_1_1_3 = {
              uuid:"rk_1_1_3",
                endpoint:["Dot", { radius:6 }],//连接点的形状、大小
                paintStyle:{ fillStyle:color1 },//连接点的颜色
                isSource:true,
                scope:"green dot",//点击该颜色的时候，其余该颜色的点都会显示虚线框
                connectorStyle:{ strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },//点与点之间连线颜色
                connector : "Straight",//线条形状，直线
                maxConnections:-1,
                isTarget:true,
                dropOptions : exampleDropOptions
            };
            
            
            var rk_1_2 = {
              uuid:"rk_1_2",
              anchor:"RightMiddle",//连接点的位置，可以被覆盖
                endpoint:["Dot", { radius:6 }],//连接点的形状、大小
                paintStyle:{ fillStyle:color1 },//连接点的颜色
                isSource:true,
                scope:"green dot",//点击该颜色的时候，其余该颜色的点都会显示虚线框
                connectorStyle:{ strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },//点与点之间连线颜色
                connector: [ "Flowchart", { stub: [40, 60], gap: 5, cornerRadius: 5, alwaysRespectStubs: true } ],
                maxConnections:1,
                isTarget:true,
                dropOptions : exampleDropOptions
            };        
            jsPlumb.addEndpoint("jx_rk", jx_rk);
            jsPlumb.addEndpoint("sqy_rk", sqy_rk);
            
            jsPlumb.addEndpoint("rk_1", rk_1_1);//中间点
            
            //左上角为起点，0.2表示相对x的偏移量，0.5表示相对y的偏移量
            var anchors_1_1 = [[0, 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);
                    };
            
            jsPlumb.addEndpoint("rk_1", {anchor:anchors_1_1}, rk_1_1_1);//上边点
            
            jsPlumb.addEndpoint("rk_1", rk_1_2);
            
            
            //固定连线
            var obj = jsPlumb.connect({uuids:["jx_rk", "rk_1_1_1"]});
            obj.getOverlay("label").setLabel("镜像_2_人口");
            
            obj.bind("click", function (component, originalEvent) {
                alert("镜像_2_人口")
            });
            
            obj = jsPlumb.connect({uuids:["sqy_rk", "rk_1_1"]});
            obj.getOverlay("label").setLabel("省全员_2_人口");
            obj.bind("click", function (component, originalEvent) {
                alert("省全员_2_人口")
            });          
            //人口 end
            
            
            //法人 start            
            var fr_3_2 = {
              uuid:"fr_3_2",
              anchor:"RightMiddle",//连接点的位置，可以被覆盖
                endpoint:["Dot", { radius:6 }],//连接点的形状、大小
                paintStyle:{ fillStyle:color1},//连接点的颜色
                isSource:true,
                scope:"green dot",//点击该颜色的时候，其余该颜色的点都会显示虚线框
                connectorStyle:{ strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },//点与点之间连线颜色
                connector: [ "Flowchart", { stub: [40, 60], gap: 5, cornerRadius: 5, alwaysRespectStubs: true } ],
                maxConnections:-1,
                isTarget:true,
                dropOptions : exampleDropOptions
            };           
            jsPlumb.addEndpoint("fr_3", fr_3_2);
            //法人 end
            
            //绘制箭头
          var arrowCommon = { foldback: 0.7, fillStyle: "gray", width: 14 },
            overlays = [
                [ "Arrow", { location: 1}, arrowCommon ],
                [ "Arrow", { location: 0, direction: -1 }, arrowCommon ]//-1表示反向箭头
            ];
            
            //人口到法人
            jsPlumb.connect({uuids:["rk_1_2", "fr_3_2"], overlays:overlays}); 
            
            //可拖动
            jsPlumb.draggable($('._jsPlumb_endpoint_anchor_'));            
        });
    </script>
</head>
<body>
 <!-- 人口 begin -->
 <div id="jx_rk" class="item">镜像</div>
 <div id="sqy_rk" class="item">省全员</div>
 
 <div id="rk_1" class="item">人口</div>
 <!-- 人口 end -->
 
 <!-- 法人 begin -->
 <div id="fr_3" class="item">法人</div>
 <!-- 法人 end -->
 
</body>

</html>
转载于:https://my.oschina.net/sniperLi/blog/496959