我想用jsplumb庫製作一個流程圖。我需要從一個div創建多個連接。 Ex-Div 1應該連接到Div 2和Div 3.我希望源端點是相同的,即bottomcenter。請讓我知道該做什麼工作 謝謝!如何在jsplumb中從源端點建立多個連接
8
A
回答
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>
添加jsPlumb庫
3
對於目標終點設置全局做出無限連接:
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", }]]
};
0
配置jsplumb使用靜態錨 - https://jsplumbtoolkit.com/community/doc/anchors.html#static
相關問題
- 1. 角jsplumb社區 - 無法建立連接 - 源不存在
- 2. jsPlumb - 使用單個端點爲源和目標繪製多個連接
- 3. jsPlumb連接和端點樣式
- 4. JsPlumb連接不使用現有的源/目標端點樣式
- 5. 客戶端如何建立點對點連接?
- 6. CocoaAsyncSocket建立多個連接
- 7. 如何刪除jsPlumb連接
- 8. Jsplumb - 連接器
- 9. Xcode中 - 建立從多個來源
- 10. 如何在matlab中建立db2連接?
- 11. JsPlumb動態端點作爲連接覆蓋
- 12. 如何建立連接?
- 13. Clojure建立多個數據庫連接
- 14. 如何建立一個好的節點/連接網絡| Java
- 15. 如何在LAN外部建立客戶端服務器連接?
- 16. jsPlumb端點編輯位置
- 17. 使jsplumb端點只讀
- 18. jsPlumb端點可見:false?
- 19. 在Mongo中建立多對多連接的數據建模?
- 20. 終端誤差建立安全連接:
- 21. PyBlueZ:創建多個客戶端連接
- 22. 如何判斷一個連接是否在java中建立?
- 23. tcpkill:只有在建立連接後才能建立連接
- 24. 如何連接HighCharts中兩個鏈接系列中的端點
- 25. 刪除所選連接jsplumb
- 26. StackExchange.Redis如何使用多個端點和連接?
- 27. 如何在駱駝jdbc端點中啓用多個數據源?
- 28. 在jsPlumb中創建元素之間的連接
- 29. 如何在DotNet中建立直接連接?
我得到了這個答案。在創建端點時,您可以將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