मैं उन्हें जोड़ने के लिए दो या अधिक तत्वों के बीच एक रेखा कैसे खींच सकता हूं? HTML / CSS / JavaScript / SVG / कैनवास का कोई भी संयोजन ठीक है।
यदि आपका उत्तर इनमें से किसी का समर्थन करता है, तो उसका उल्लेख करें:
इस सवाल को इसके कई रूपों को समेकित करने के लिए अद्यतन किया गया है।
जवाबों:
jsPlumb एक विकल्प उपलब्ध है जो फ्लोचार्ट डेमो सहित इसके कई डेमो द्वारा देखे गए ड्रैग और ड्रॉप का समर्थन करता है ।
यह एक निःशुल्क सामुदायिक संस्करण और एक पेड टूलकिट संस्करण में उपलब्ध है।
टूलकिट संस्करण एक व्यापक डेटा बाइंडिंग परत के साथ सामुदायिक संस्करण को लपेटता है, साथ ही लोकप्रिय पुस्तकालयों के लिए अनुप्रयोगों और एकीकरण के निर्माण के लिए कई यूआई विगेट्स, और व्यावसायिक रूप से लाइसेंस प्राप्त है।
Svgs के साथ लाइनें जोड़ना मेरे लिए एक शॉट के लायक था, और इसने पूरी तरह से काम किया ... सबसे पहले, स्केलेबल वेक्टर ग्राफिक्स (SVG) इंटरएक्टिविटी और एनीमेशन के लिए समर्थन के साथ दो-आयामी ग्राफिक्स के लिए एक XML- आधारित वेक्टर छवि प्रारूप है। एसवीजी चित्र और उनके व्यवहार XML पाठ फ़ाइलों में परिभाषित किए गए हैं। आप <svg>टैग का उपयोग करके HTML में एक svg बना सकते हैं । Adobe Illustrator पथों का उपयोग करके एक जटिल svgs बनाने के लिए उपयोग किए जाने वाले सर्वोत्तम सॉफ़्टवेयर में से एक है।
एक लाइन का उपयोग कर दो divs में शामिल होने की प्रक्रिया:
दो divs बनाएँ और उन्हें आवश्यकतानुसार कोई भी पद दें
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
(स्पष्टीकरण के लिए मैं कुछ इनलाइन स्टाइल कर रहा हूं लेकिन स्टाइल के लिए एक अलग सीएसएस फ़ाइल बनाना हमेशा अच्छा होता है)
<svg><line id="line1"/></svg>
लाइन टैग हमें दो निर्दिष्ट बिंदुओं (X1, y1) और (x2, y2) के बीच एक रेखा खींचने की अनुमति देता है। (एक संदर्भ w3schools यात्रा के लिए।) हमने अभी तक उन्हें निर्दिष्ट नहीं किया है। क्योंकि हम लाइन टैग की विशेषताओं (X1, y1, x2, y2) को संपादित करने के लिए jQuery का उपयोग करेंगे।
में <script>टैग लिखने
line1 = $('#line1');
div1 = $('#div1');
div2 = $('#div2');
मैं दो divs और लाइन का चयन करने के लिए चयनकर्ताओं का इस्तेमाल किया ...
var pos1 = div1.position();
var pos2 = div2.position();
jQuery position()विधि हमें किसी तत्व की वर्तमान स्थिति प्राप्त करने की अनुमति देती है। अधिक जानकारी के लिए, https://api.jquery.com/position/ पर जाएं (आप offset()विधि का भी उपयोग कर सकते हैं )
अब जैसा कि हमने सभी पदों को प्राप्त कर लिया है, जिसकी हमें आवश्यकता है कि हम निम्नानुसार रेखा खींच सकते हैं ...
line1
.attr('x1', pos1.left)
.attr('y1', pos1.top)
.attr('x2', pos2.left)
.attr('y2', pos2.top);
jQuery .attr()पद्धति का उपयोग चयनित तत्व की विशेषताओं को बदलने के लिए किया जाता है।
हमने ऊपर की लाइन में किया था हम लाइन की विशेषताओं को बदल दिया है
x1 = 0
y1 = 0
x2 = 0
y2 = 0
सेवा
x1 = pos1.left
y1 = pos1.top
x2 = pos2.left
y2 = pos2.top
position()दो मानों के रूप में , एक 'लेफ्ट' और दूसरा 'टॉप', हम आसानी से इनका उपयोग कर सकते हैं।
अब लाइन टैग में दो बिंदुओं के बीच रेखा खींचने के लिए दो अलग-अलग निर्देशांक हैं।
युक्ति: इवेंट श्रोताओं को जोड़ें क्योंकि आपको divs की आवश्यकता है
युक्ति: सुनिश्चित करें कि आप स्क्रिप्ट टैग में कुछ भी लिखने से पहले पहले jQuery लाइब्रेरी आयात करें
JQuery के माध्यम से समन्वय जोड़ने के बाद ... यह कुछ इस तरह दिखेगा
स्निपेट केवल प्रदर्शन उद्देश्य के लिए है, कृपया सही समाधान प्राप्त करने के लिए ऊपर दिए गए चरणों का पालन करें
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="50" stroke="red"/></svg>मुझे भी कुछ दिन पहले वही आवश्यकता थी
मैंने एक पूरी चौड़ाई और ऊंचाई svg का उपयोग किया और इसे अपने सभी divs के नीचे जोड़ा और गतिशील रूप से इन svg में लाइनें जोड़ीं।
कैसे मैं यह यहाँ svg का उपयोग कर की जाँच करें
एचटीएमएल
<div id="ui-browser"><div class="anchor"></div>
<div id="control-library" class="library">
<div class="name-title">Control Library</div>
<ul>
<li>Control A</li>
<li>Control B</li>
<li>Control C</li>
<li>Control D</li>
</ul>
</div><!--
--></div><!--
--><div id="canvas">
<svg id='connector_canvas'></svg>
<div class="ui-item item-1"><div class="con_anchor"></div></div>
<div class="ui-item item-2"><div class="con_anchor"></div></div>
<div class="ui-item item-3"><div class="con_anchor"></div></div>
<div class="ui-item item-1"><div class="con_anchor"></div></div>
<div class="ui-item item-2"><div class="con_anchor"></div></div>
<div class="ui-item item-3"><div class="con_anchor"></div></div>
</div><!--
--><div id="property-browser"></div>
https://jsfiddle.net/kgfamo4b/
$('.anchor').on('click',function(){
var width = parseInt($(this).parent().css('width'));
if(width==10){
$(this).parent().css('width','20%');
$('#canvas').css('width','60%');
}else{
$(this).parent().css('width','10px');
$('#canvas').css('width','calc( 80% - 10px)');
}
});
$('.ui-item').draggable({
drag: function( event, ui ) {
var lines = $(this).data('lines');
var con_item =$(this).data('connected-item');
var con_lines = $(this).data('connected-lines');
if(lines) {
lines.forEach(function(line,id){
$(line).attr('x1',$(this).position().left).attr('y1',$(this).position().top+1);
}.bind(this));
}
if(con_lines){
con_lines.forEach(function(con_line,id){
$(con_line).attr('x2',$(this).position().left)
.attr('y2',$(this).position().top+(parseInt($(this).css('height'))/2)+(id*5));
}.bind(this));
}
}
});
$('.ui-item').droppable({
accept: '.con_anchor',
drop: function(event,ui){
var item = ui.draggable.closest('.ui-item');
$(this).data('connected-item',item);
ui.draggable.css({top:-2,left:-2});
item.data('lines').push(item.data('line'));
if($(this).data('connected-lines')){
$(this).data('connected-lines').push(item.data('line'));
var y2_ = parseInt(item.data('line').attr('y2'));
item.data('line').attr('y2',y2_+$(this).data('connected-lines').length*5);
}else $(this).data('connected-lines',[item.data('line')]);
item.data('line',null);
console.log('dropped');
}
});
$('.con_anchor').draggable({drag: function( event, ui ) {
var _end = $(event.target).parent().position();
var end = $(event.target).position();
if(_end&&end)
$(event.target).parent().data('line')
.attr('x2',end.left+_end.left+5).attr('y2',end.top+_end.top+2);
},stop: function(event,ui) {
if(!ui.helper.closest('.ui-item').data('line')) return;
ui.helper.css({top:-2,left:-2});
ui.helper.closest('.ui-item').data('line').remove();
ui.helper.closest('.ui-item').data('line',null);
console.log('stopped');
}
});
$('.con_anchor').on('mousedown',function(e){
var cur_ui_item = $(this).closest('.ui-item');
var connector = $('#connector_canvas');
var cur_con;
if(!$(cur_ui_item).data('lines')) $(cur_ui_item).data('lines',[]);
if(!$(cur_ui_item).data('line')){
cur_con = $(document.createElementNS('http://www.w3.org/2000/svg','line'));
cur_ui_item.data('line',cur_con);
} else cur_con = cur_ui_item.data('line');
connector.append(cur_con);
var start = cur_ui_item.position();
cur_con.attr('x1',start.left).attr('y1',start.top+1);
cur_con.attr('x2',start.left+1).attr('y2',start.top+1);
});
VISJS अपने एरो उदाहरण के साथ इसका समर्थन करता है, जो ड्रैग करने योग्य तत्वों का समर्थन करता है।
यह अपने इंटरैक्शन इवेंट उदाहरण के साथ संपादन योग्य कनेक्शन का भी समर्थन करता है ।
GoJS अपने स्टेट चार्ट उदाहरण के साथ इसका समर्थन करता है, जो तत्वों को खींचने और छोड़ने और कनेक्शन के संपादन का समर्थन करता है।
इस उत्तर पर ही आधारित होता वाल्टर Northwoods ' जवाब ।
हाल ही में, मैंने एक सरल वेब ऐप विकसित करने की कोशिश की है, जो ड्रैग और ड्रॉप घटकों का उपयोग करता है और उन्हें जोड़ने वाली लाइनें हैं। मैं इन दो सरल और अद्भुत जावास्क्रिप्ट पुस्तकालयों में आया:
रैफेल इसका समर्थन करता है, इसके ग्रैफ़ल उदाहरण के साथ ।
यह उत्तर आवा अख्तर के उत्तर और वैभव जैन के उत्तर पर आधारित है ।
डी 3 के सैकड़ों उदाहरण हैं , जिनमें से कुछ इस प्रश्न के लिए उपयुक्त हैं।
खींचें और ड्रॉप के बिना उदाहरण, जो तय किए गए हैं:
बिना ड्रैग एंड ड्रॉप के उदाहरण, इंटरेक्टिव हैं:
घसीटने और छोड़ने के उदाहरण:
यह उत्तर ग्लेन डेटन के उत्तर पर आधारित है ।
mxGraph - द्वारा इस्तेमाल किया draw.io - इसके साथ, उपयोग के इस मामले का समर्थन करता है Grapheditor उदाहरण । प्रलेखन। उदाहरण।
यह उत्तर वैभव जैन के उत्तर पर आधारित है ।
Cytoscape इसका आर्किटेक्चर उदाहरण के साथ समर्थन करता है जो ड्रैगिंग तत्वों का समर्थन करता है।
कनेक्शन बनाने के लिए, किनारे का विस्तार है। यह अभी तक मौजूदा कनेक्शन को संपादित करने का समर्थन नहीं करता है। सवाल।
कनेक्शन आकार संपादित करने के लिए, किनारे-संपादन एक्सटेंशन है। डेमो।
संपादित-editation विस्तार लेकिन वहाँ अभी तक कोई डेमो है, का वादा लगता है।
js-graph.it इस उपयोग के मामले का समर्थन करता है, जैसा कि इसके शुरुआती गाइड द्वारा देखा जाता है , कनेक्शन ओवरलैप के बिना खींचने वाले तत्वों का समर्थन करता है। ऐसा नहीं लगता कि यह संपादन / कनेक्शन बनाने का समर्थन करता है। ऐसा नहीं लगता कि यह अब भी कायम है।
JointJS / Rappid अपने रसोईघरों के उदाहरण के साथ इस उपयोग के मामले का समर्थन करता है जो तत्वों को खींचने और छोड़ने, और कनेक्शन के स्थान बदलने का समर्थन करता है। इसके कई उदाहरण हैं।
यह उत्तर वैभव जैन के उत्तर पर आधारित है ।