Geek Answers Handbook

How to make multiple connection to source endpoint in jsplumb

I am trying to create a flowchart using the jsplumb library. I need to make several connections from one div. Ex-Div 1 must connect to Div 2 and Div 3. I want the source endpoint to be the same. Please let me know what needs to be done to make this work Thank you!

+8
jsplumb
source share
3 answers

For target endpoints, the global value for creating unlimited connections:

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" }]] };

for source The endpoint establishes globality for creating unlimited connections:

 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", }]] };
+3
source share

Use the following code to connect div1 to div2 and 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>

add jsPlumb library

0
source share

Configure jsplumb to use static bindings - https://jsplumbtoolkit.com/community/doc/anchors.html#static

0
source share

More articles:


All Articles