0

I have displayed one Icons in one Div element. I need to draw a connecting line between those Icons. Please note that the Div is a dynamic element.

I have displayed the current Image below. enter image description here

Expected image is displayed below.

enter image description here

Please guide me how to do that. Thanks in advance.

Karthik
  • 65
  • 1
  • 10
  • https://jsplumbtoolkit.com/ this might help you – Manish Nov 17 '17 at 05:58
  • something similar to this already asked link for it [https://stackoverflow.com/questions/19382872/how-to-connect-html-divs-with-lines(https://stackoverflow.com/questions/19382872/how-to-connect-html-divs-with-lines) – Biby Cheriyan Nov 17 '17 at 06:00
  • Possible duplicate of [How to connect HTML Divs with Lines?](https://stackoverflow.com/questions/19382872/how-to-connect-html-divs-with-lines) – bhansa Nov 18 '17 at 17:37

2 Answers2

2

Here is a small demo that will help you know how to use jsPlumb achieve what you want. 

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>
Hope it helps :)
Manish
  • 4,692
  • 3
  • 29
  • 41
2

The concept is to draw a div with absolute position inside of "starting point" and rotate it on an angle between 2 points:

// 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 for the line should be:

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

Here is the working example

2oppin
  • 1,941
  • 20
  • 33
  • Appreciate your efforts. This is quite helpful. But i don't want to select the two icons to connect them. I want them to be connected on page load itself. Any suggestions please? – Karthik Nov 17 '17 at 09:45
  • as I wrote, simply select those two icons on page load. if you have jquery enabled you can copypaste this code and add to the bottom drawConnection($('$id_of_icon1'),$('$id_of_icon2')); – 2oppin Nov 17 '17 at 10:06