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

问题描述：

我想用jsplumb库制作一个流程图。我需要从一个div创建多个连接。 Ex-Div 1应该连接到Div 2和Div 3.我希望源端点是相同的，即bottomcenter。请让我知道该做什么工作谢谢！如何在jsplumb中从源端点建立多个连接

我得到了这个答案。在创建端点时，您可以将maxConnections：-1, 设置为无限连接。如果你设置了一些值，那么它只能使连接数等于值。您需要在sourceEndpoint和targetEndpoint创建时间中指定此项 – 2012-08-23 18:54:46

由于某种原因，此解决方案对我无效。 – spadelives 2012-12-11 06:28:59

@ user1667230：您是否试图将maxConnections = -1添加到两个端点？如果没有，那么尝试一下。 – 2012-12-11 18:06:14

答

使用下面的代码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库

答

对于目标终点设置全局做出无限连接：

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

答

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

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

相关推荐