Sto provando a creare un diagramma di flusso usando la libreria jsplumb. Ho bisogno di creare connessioni multiple da un singolo div. Ex-Div 1 dovrebbe connettersi a Div 2 e Div 3. Voglio che l'endpoint di origine sia lo stesso in cui si trova il bottomcenter. Per favore fatemi sapere cosa dovrebbe essere fatto per fare questo lavoro Grazie!Come effettuare una connessione multipla dall'endpoint di origine in jsplumb
Utilizzare il seguente codice per la connessione div1 a div2 e 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>
aggiungere jsPlumb biblioteca
Per target Consumatori Punti impostarlo a livello globale per rendere le connessioni illimitate:
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" }]]
};
per fonte Endpoint imposta globale per effettuare connessioni illimitate:
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", }]]
};
Configurare jsplumb per utilizzare ancoraggi statici - https://jsplumbtoolkit.com/community/doc/anchors.html#static
Ho ottenuto la risposta per questo. Eccolo, mentre crei i punti finali, puoi impostare le connessioni max : -1, per connessioni illimitate. Se si imposta su un valore, allora può fare solo il numero di connessioni uguale al valore. È necessario specificarlo in sourceEndpoint e targetEndpoint creation time –
Questa soluzione non ha funzionato per me per qualche motivo. – spadelives
@ user1667230: l'hai provato a rendere maxConnections = -1 su entrambi gli endpoint? Altrimenti, provalo. –