Disegno di una linea tra due immersioni trascinabili

Question

Sì. So che questo tipo di domande sono state poste prima nei seguenti link: Question 1, Question 2 e Question 3. Ma la mia domanda è molto diversa dalle domande già fatte.

Quello che voglio è il seguente: ho due div trascinabili e ho un connettore (una linea retta) tra di loro (disegnato con la linea SVG). Quando sposto questi div trascinabili ho bisogno di spostare un connettore tra loro di conseguenza. La mia domanda è più simile a Question 3, ma in quella domanda, una volta che un utente crea una connessione tra le div, queste div si fermano e quindi non si preoccupano di aggiornare i connettori.

Qualcuno ha mai incontrato un esempio di lavoro o una dimostrazione di ciò che sto dicendo? O qualcuno potrebbe darmi qualche idea su come farlo in modo ottimale per favore?

Nel caso, sto usando jQuery come un framework javascript (se vale la pena di saperlo).

Grazie mille.

UPDATE 1

ho trovato anche questo demo, ma funziona molto molto male, direi in modo non corretto.

Answer 1

Usa jsPlumb - la migliore libreria per disegnare linee personalizzate sulla pagina web.

https://jsplumbtoolkit.com/demos.html

Answer 2

linee che uniscono con SVG è valsa la pena un colpo per me, e ha funzionato perfettamente ... prima di tutto, Scalable Vector Graphics (SVG) è un formato grafico vettoriale basato su XML per bidimensionale grafica con supporto per l'interattività e l'animazione. Le immagini SVG e i loro comportamenti sono definiti in file di testo XML. puoi creare un file SVG in HTML usando il tag <svg>. Adobe Illustrator è uno dei migliori software utilizzati per creare un SVG complesso utilizzando i percorsi.

Procedura per unire due div utilizzando una linea:

1. creare due div e dare loro qualsiasi posizione come è necessario

   <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> 
   

   (per il bene di spiegazione che sto facendo un po 'di stile in linea ma è sempre bene creare un file css separato per lo styling)

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

   Il tag di riga consente di tracciare una linea tra due punti specificati (x1, y1) e (x2, y2). (per una visita di riferimento w3schools.) non li abbiamo ancora specificati. perché useremo jQuery per modificare gli attributi (x1, y1, x2, y2) del tag di riga.

3. in <script> tag di scrittura

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

   Ho usato selettori per selezionare i due div e la linea ...

   var pos1 = div1.position(); 
   var pos2 = div1.position(); 
   

   jQuery metodo position() ci permette di ottenere la posizione corrente di un elemento.Per ulteriori informazioni, visitare https://api.jquery.com/position/ (è possibile utilizzare il metodo offset() troppo)

Ora, come abbiamo ottenuto tutte le posizioni di cui abbiamo bisogno possiamo trarre riga come segue ...

line1.attr('x1',pos1.left).attr('y1',pos1.top).attr('x2',pos2.left).attr('y2',pos2.top); 

jQuery metodo .attr() è usato per cambiare gli attributi dell'elemento selezionato.

Tutto quello che abbiamo fatto in linea di cui sopra è che abbiamo cambiato gli attributi di linea dal

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

a

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

come position() restituisce due valori, uno e gli altri 'top' 'sinistra', possiamo accedere facilmente usando .top e .left usando gli oggetti (qui pos1 e pos2) ...

Ora il tag di riga ha due coordinate distinte per tracciare una linea tra due punti.

Suggerimento: aggiungere listener di eventi come è necessario div

Suggerimento: assicurarsi di importare libreria jQuery prima prima di scrivere qualsiasi cosa nel tag script

Dopo aggiungendo coordinate attraverso JQuery ... E ' sarà simile a questa

seguente frammento è a scopo dimostrativo, si prega di seguire i passaggi sopra per ottenere corretta soluzione

<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

Ho anche lo stesso requisito qualche giorno fa

ho usato un pieno larghezza e altezzasvg e ha aggiunto che sotto tutti i miei div e ha aggiunto linee a questi svg in modo dinamico.

Acquista il come ho fatto qui utilizzando svg

HTML

<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); 
});