Tracer une ligne entre deux div divisibles

Question

Oui Je sais que ce genre de questions a déjà été posé dans les liens suivants: Question 1, Question 2 et Question 3. Mais ma question est assez différente des questions déjà posées. Ce que je veux est suit: J'ai deux divs draggable et ai un connecteur (une ligne droite) entre eux (dessiné avec la ligne SVG). Quand je déplace ces divs draggable je dois déplacer un connecteur entre eux en conséquence. Ma question est plus similaire à la Question 3, mais là dans cette question, une fois qu'un utilisateur crée une connexion entre divs ces divs cessent d'être draggable, donc ils ne se soucient pas de rafraîchir les connecteurs.

Est-ce que quelqu'un a déjà rencontré un exemple de travail ou une démo de ce que je dis? Ou, quelqu'un pourrait-il me donner des idées sur la façon de le faire de manière optimale s'il vous plaît? Juste au cas où, j'utilise jQuery comme framework javascript (si ça vaut le coup de le savoir).

Merci beaucoup.

MISE À JOUR 1

J'ai trouvé ce demo aussi, mais il fonctionne très très mal, je dirais de manière incorrecte.

Answer 1

Utilisez jsPlumb - la meilleure bibliothèque pour tracer des lignes personnalisées sur une page Web.

https://jsplumbtoolkit.com/demos.html

Answer 2

lignes avec Joining svgs valait un coup pour moi, et cela a fonctionné parfaitement ... tout d'abord Scalable Vector Graphics (SVG) est un vecteur basé sur XML format d'image pour deux dimensions graphiques avec support pour l'interactivité et l'animation. Les images SVG et leurs comportements sont définis dans des fichiers texte XML. vous pouvez créer un svg en HTML en utilisant la balise <svg>. Adobe Illustrator est l'un des meilleurs logiciels utilisés pour créer un svgs complexe en utilisant des chemins.

Procédure pour joindre deux divs en utilisant une ligne:

1. créer deux divs et leur donner toutes les positions que vous avez besoin

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

   (par souci d'explication que je fais un peu de style en ligne mais il est toujours bon de faire un fichier CSS séparé pour le style)

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

   L'étiquette de ligne permet de tracer une ligne entre deux points spécifiés (x1, y1) et (x2, y2). (pour une visite de référence w3schools.) nous ne les avons pas encore spécifiés. parce que nous utiliserons jQuery pour éditer les attributs (x1, y1, x2, y2) de l'étiquette de ligne.

3. dans <script> tag écrire

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

   j'ai utilisé sélecteurs pour sélectionner les deux divs et méthode ligne ...

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

   jQuery position() nous permet d'obtenir la position actuelle d'un élément.Pour plus d'informations, visitez https://api.jquery.com/position/ (vous pouvez utiliser la méthode offset() trop)

Maintenant que nous avons obtenu toutes les positions dont nous avons besoin, nous pouvons tracer une ligne comme suit ...

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

méthode jQuery .attr() est utilisé pour changer les attributs de l'élément sélectionné.

Tout ce que nous avons fait en ligne ci-dessus est que nous avons changé les attributs de la ligne de

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

à

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

comme position() renvoie deux valeurs, une « gauche » « top » et d'autres, nous pouvons accéder facilement à l'aide de .top et .left en utilisant les objets (ici pos1 et pos2) ...

Maintenant l'étiquette de ligne a deux coordonnées distinctes pour tracer une ligne entre deux points.

Astuce: ajouter des écouteurs d'événement que vous devez des div

Astuce: assurez-vous d'importer la bibliothèque jQuery d'abord avant d'écrire quoi que ce soit dans la balise script

Après l'ajout des coordonnées par JQuery ... Il ressemble à quelque chose comme ça

extrait suivant est à des fins de démonstration seulement, s'il vous plaît suivez les étapes ci-dessus pour obtenir la solution correcte

<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

J'ai aussi la même exigence ya quelques jours

J'ai utilisé une pleine largeur et hauteursvg et a ajouté ci-dessous tous mes divs et ajouté lignes à ces svg dynamiquement.

Commander la façon dont je l'ai fait ici en utilisant 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); 
});