jsplumbでソースエンドポイントから複数接続する方法

jsplumbライブラリを使用してフローチャートを作成しようとしています。 1つのdivから複数の接続を作成する必要があります。 Ex Div 1はDiv 2とDiv 3に接続する必要があります。私はソースエンドポイントが同じである、すなわちボトムセンターであることを望みます。この仕事をするために何をすべきか教えてくださいありがとう！jsplumbでソースエンドポイントから複数接続する方法

出典

2012-08-16 unix_user

私はこれに対する答えを得ました。ここでは、エンドポイントを作成する際に、無制限接続の場合に maxConnections：-1、を設定できます。何らかの値に設定すると、接続数だけをvalueに等しくすることができます。あなたはsourceEndpointとtargetEndpointの作成時間でこれを指定する必要があります –

この解決策は何らかの理由で私のためには機能しませんでした。 – spadelives

@ user1667230：両方のエンドポイントにmaxConnections = -1を作成しようとしましたか？そうでなければそれを試してください。 –

DIV2にDIV1を接続するには、次のコードを使用して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-20 10:01:23

を追加し、それがグローバルな無制限の接続作るために設定ポイント：ソースの

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-25 07:07:11

スタティックアンカーを使用するようにjsplumbを設定する - https://jsplumbtoolkit.com/community/doc/anchors.html#static

出典

2017-03-26 17:50:57 zeleniy

jsplumbでソースエンドポイントから複数接続する方法

答えて

関連する問題