में स्रोत एंडपॉइंट से एकाधिक कनेक्शन कैसे बनाएं I jsplumb लाइब्रेरी का उपयोग करके फ़्लोचार्ट बनाने का प्रयास कर रहा हूं। मुझे एक div से कई कनेक्शन बनाने की ज़रूरत है। पूर्व-डिव 1 को Div 2 और Div 3 से कनेक्ट होना चाहिए। मैं चाहता हूं कि स्रोत एंडपॉइंट वही हो। Iee bottomcenter। कृपया मुझे बताएं कि यह काम करने के लिए क्या किया जाना चाहिए धन्यवाद!jsplumb
उपयोग निम्न कोड DIV2 और DIV3 को div1 कनेक्ट करने के लिए
<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
मुझे इसका उत्तर मिला। यहां अंत बिंदु बनाने के दौरान, आप असीमित कनेक्शन के लिए maxConnections: -1, सेट कर सकते हैं। यदि आप कुछ मूल्य पर सेट करते हैं, तो यह केवल कनेक्शन की संख्या को मूल्य के बराबर बना सकता है। आपको इसे SourceEndpoint और targetEndpoint निर्माण समय –
में निर्दिष्ट करने की आवश्यकता है यह समाधान किसी कारण से मेरे लिए काम नहीं करता है। – spadelives
@ user1667230: क्या आपने maxConnections = -1 को दोनों बिंदुओं को बनाने के लिए प्रयास किया था? यदि नहीं तो कोशिश करें। –