2つの異なるdivに表示された2つのアイコンの間にラインコネクタを描画する方法。

Question

1つのDiv要素に1つのアイコンを表示しました。私はそれらのアイコンの間に接続線を描く必要があります。ディビジョンはダイナミックな要素であることに注意してください。

下記の画像を表示しました。

下記の画像が表示されます。

それを行う方法を私を導いてください。前もって感謝します。

Answer 1

jsPlumbの使い方を知るのに役立つ小さなデモはこちらです。

jsPlumb.ready(function() { 
 
      jsPlumb.connect({ 
 
       source:"firstItem", 
 
       target:"secondItem", 
 
       endpoint:"Dot" 
 
      }); 
 
     });

span{ 
 
    display:inline-block; 
 
    height:50px; 
 
    width:100px; 
 
    background-color:yellow; 
 
}

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script> 
 
<div id="diagramContainer"> 
 
     <div > 
 
     <span id="firstItem">Smiley1</span> 
 
     </div> 
 
     <div > 
 
     <span style="float:right" id="secondItem">Smiley2</span> 
 
     </div> 
 
    </div>

はそれが役に立てば幸い:)

Answer 2

コンセプトは「開始点」の内部の絶対位置でのdivを描くことで、2点間の角度でそれを回転させる：

// a,b = jquery results i.e. a=$('#smile1'), b=$('#smile2'), 
    function dist(a,b) { 
     let o1 = a.offset(), o2 = b.offset(); 
     return Math.sqrt(Math.pow(o1.top - o2.top,2) + Math.pow(o1.left - o2.left,2)); 
    } 
    function angle(a, b) { 
     let ao = a.offset(), bo = b.offset(); 
      dx = ao.left-bo.left, dy = ao.top-bo.top; 
     return Math.PI + Math.atan2(dy, dx); 
    } 
    function drawConnection(a,b) { 
     $('.line').remove(); 
     let d = dist(a,b); 
     a.removeClass('first'); 
     let ang = d<10 
      ? 0 
      : (angle(a,b) * 180)/ Math.PI; 
     a.append(
      $('<div>').addClass('line') 
       .css({ 
        width: Math.round(d) +'px', 
        transform: 'rotate(' + Math.round(ang) + 'deg)' 
       }) 
     ); 
     return ang; 
    } 

行のCSSは、次のとおりです。

.line { 
    position: absolute; 
    transform-origin: top left; // to make it rotate around top-left 
    border-top: solid 2px blue; // set any color 
    top: 10px; // center of your "smile" 
    left: 10px; 
} 

ここにはworking example