दो ड्रैगगेबल divs

Question

के बीच एक रेखा खींचना हाँ मुझे पता है कि इस तरह के प्रश्नों को निम्नलिखित लिंक में पहले पूछा गया है: Question 1, Question 2 और Question 3। लेकिन मेरा सवाल पहले से पूछे जाने वाले प्रश्नों से काफी अलग है।

मुझे जो चाहिए वह निम्नलिखित है: मेरे पास दो ड्रैगगेबल divs हैं और उनके बीच एक कनेक्टर (सीधी रेखा) है (एसवीजी लाइन के साथ खींचा गया है)। जब मैं इन ड्रैगजेबल divs को स्थानांतरित करता हूं तो मुझे उनके बीच एक कनेक्टर को स्थानांतरित करने की आवश्यकता होती है। मेरा प्रश्न Question 3 के समान है, लेकिन उस प्रश्न में, जब उपयोगकर्ता एक divs के बीच कनेक्शन बनाता है तो divs draggable होने से रोकते हैं, इसलिए उन्हें ताज़ा कनेक्टर की परवाह नहीं है।

क्या किसी ने कभी भी जो भी कह रहा हूं उसके किसी भी कामकाजी उदाहरण या डेमो से मुलाकात की है? या, क्या कोई मुझे किसी इष्टतम तरीके से ऐसा करने के बारे में कोई विचार दे सकता है?

बस मामले में, मैं jQuery को जावास्क्रिप्ट ढांचे के रूप में उपयोग कर रहा हूं (यदि यह जानना उचित है)।

बहुत बहुत धन्यवाद।

UPDATE 1

मैं इस demo भी पाया है, लेकिन यह बहुत बहुत बुरा काम करता है, मैं गलत तरीके से कह सकते हैं कि।

Answer 1

वेबपृष्ठ पर कस्टम लाइनों को चित्रित करने के लिए jsPlumb - सर्वोत्तम लाइब्रेरी का उपयोग करें। SVGs साथ

https://jsplumbtoolkit.com/demos.html

Answer 2

में शामिल होने से लाइनों मेरे लिए एक शॉट के लायक था, और यह पूरी तरह से काम किया ... सब से पहले, स्केलेबल वेक्टर ग्राफ़िक्स (SVG) दो आयामी के लिए एक XML- आधारित वेक्टर छवि प्रारूप है अंतःक्रियाशीलता और एनीमेशन के लिए समर्थन के साथ ग्राफिक्स। एसवीजी छवियों और उनके व्यवहार एक्सएमएल पाठ फ़ाइलों में परिभाषित हैं। आप <svg> टैग का उपयोग कर HTML में एक svg बना सकते हैं। एडोब इलस्ट्रेटर पथ का उपयोग कर एक जटिल svgs बनाने के लिए इस्तेमाल किया जाने वाला सबसे अच्छा सॉफ्टवेयर है।

1. दो 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> 
   

   (मैं कुछ इनलाइन स्टाइल कर रहा हूँ स्पष्टीकरण के लिए:

   प्रक्रिया एक लाइन का उपयोग कर दो divs शामिल होने के लिए लेकिन स्टाइल के लिए एक अलग सीएसएस फ़ाइल बनाना हमेशा अच्छा होता है)

2. <svg><line id="line1"/></svg>

   लाइन टैग हमें दो निर्दिष्ट बिंदुओं (x1, y1) और (x2, y2) के बीच एक रेखा खींचने की अनुमति देता है। (संदर्भ के लिए w3schools पर जाएं।) हमने अभी तक उन्हें निर्दिष्ट नहीं किया है। क्योंकि हम पंक्ति टैग के गुणों (x1, y1, x2, y2) को संपादित करने के लिए jQuery का उपयोग करेंगे।

3. <script> टैग में

   लिखने

   line1 = $('#line1'); 
   div1 = $('#div1'); 
   div2 = $('#div2'); 
   

   मैं दो divs और लाइन का चयन करने के चयनकर्ताओं इस्तेमाल किया ...

   var pos1 = div1.position(); 
   var pos2 = div1.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() विधि चयनित तत्व के गुणों को बदलने के लिए प्रयोग किया जाता है।

सभी हम ऊपर लाइन में किया था हम position() रिटर्न दो मानों, एक 'छोड़' और अन्य 'शीर्ष' के रूप में

x1 = pos1.left 
y1 = pos1.top 
x2 = pos2.left 
y2 = pos2.top 

को

x1=0 
y1=0 
x2=0 
y2=0 

से लाइन की विशेषताओं को बदल दिया है, हम कर सकते हैं वस्तुओं का उपयोग करके .top और .left का उपयोग करके उन्हें आसानी से एक्सेस करें (यहां pos1 और pos2) ...

अब लाइन टैग में दो बिंदुओं के बीच रेखा को आकर्षित करने के लिए दो अलग-अलग समन्वय होते हैं।

युक्ति: के रूप में आप 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>

Answer 3

मैं भी यही आवश्यकता कुछ दिनों वापस

मैं एक पूर्ण चौड़ाई और ऊंचाई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); 
});