如何在jsplumb中从源端点建立多个连接

uni*_*ser 8 jsplumb

我正在尝试使用jsplumb库制作流程图.我需要从一个div创建多个连接.Ex-Div 1应连接到Div 2和Div 3.我希望源端点相同,即底部中心.请让我知道应该怎么做才能使这项工作谢谢!

小智 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>
Run Code Online (Sandbox Code Playgroud)

添加 jsPlumb 库