8

我正在尝试使用 jsplumb 库制作流程图。我需要从一个 div 建立多个连接。Ex- Div 1 应该连接到 Div 2 和 Div 3。我希望源端点相同，即底部中心。请让我知道应该做些什么来完成这项工作谢谢！

4

3 回答 3

3

对于目标端点，将其设置为全局以进行无限连接：

  var targetEndpoint = {
endpoint: "Dot",
paintStyle: { fillStyle: "blue", radius: 7 },
hoverPaintStyle: endpointHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true,
overlays: [["Label", { location: [0.5, -0.5], label: "", cssClass: "endpointTargetLabel" }]]
};

对于源端点将其设置为全局以建立无限连接：

var sourceEndpoint = {
endpoint: "Dot",
paintStyle: {
    strokeStyle: "green", fillStyle: "green", radius: 3, lineWidth: 1
},
isSource: true,
maxConnections: -1,
connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
connectorStyle: connectorPaintStyle, hoverPaintStyle: endpointHoverStyle, connectorHoverStyle: connectorHoverStyle,
dragOptions: {},
overlays: [["Label", { location: [0.5, 1.5], label: "", cssClass: "endpointSourceLabel", }]]
};
于 2016-04-25T07:07:11.273 回答
0

使用以下代码将 div1 连接到 div2 和 div3

<html>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <script src="/js/JsPlumb/jquery.jsPlumb-1.4.1-all-min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

            $(".inner").draggable({

                containment : ([ ".outer" ]),

            });

        var source = $("#div1");
        var target = $("#div2");
        var target2 = $("#div3");

            jsPlumb.connect({
                source : source,
                target : target
            });
            jsPlumb.connect({
                source : source,
                target : target2
            });


        });


</script>
<style type="text/css">
#outer{

    height: 300px;
    width: 300px;
    /*background-color: red;*/

}
.inner{

    height: 30px;
    width: 30px;
    background-color: yellow;
     margin-bottom: 37px;
}
#div2{
    position: relative; left: 114px; top: -7px;
}

</style>
<body>
    <div id="outer">

        <div class="inner" id="div1">
        </div>
        <div class="inner" id="div2">
        </div>
        <div class="inner" id="div3">
        </div>



    </div>


</body>
</html>

添加 jsPlumb 库

于 2014-01-20T10:01:23.260 回答
0

配置 jsplumb 以使用静态锚点 - https://jsplumbtoolkit.com/community/doc/anchors.html#static

于 2017-03-26T17:50:57.243 回答