title: css, jquery adjust line between draggable divs
body: <p>I have drawn a line that connects between draggable divs. But, as the div is being dragged, the line looses its source and destination point (i.e from one div to other div). What my objective is to set the line in such a way that it should not losses its edge from any div and where ever i drag the div it keeps updating itself dynamically that is height, rotation, position.</p>
  
  <p>Sorry for bad english. Please help.....!
  Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var coordinates = function(element) {
    element = $(element);
    var top = element.position().top;
    var left = element.position().left;
  
    //--------------line------------------------------
    var length = Math.sqrt(((left) * (left)) + ((top) * (top)));
    var angle = Math.atan2(top, left) * 180 / Math.PI;
    var transform = 'rotate(' + angle + 'deg)';
  
    $('#results').text('X: ' + left + ' ' + 'Y: ' + top).attr('style', 'margin-left:' + left + 'px');
    //$('#line1').attr('style', "margin-left:"+left+"px;margin-top:"+top+"px;height:"+(parseInt(100+top))+"px;transform:"+transform+";width:"+length+"px;");
  
    $('#line1').attr('style', "transform:" + transform + ";height:" + length + "px;");
  
  }
  
  //alert($('#box1').position().top);
  
  $('#box1').draggable({
    start: function() {
      coordinates('#box1');
    },
    stop: function() {
      coordinates('#box1');
    }
  });
  
  $('#box2').draggable({
    start: function() {
      coordinates('#box2');
    },
    stop: function() {
      coordinates('#box2');
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
    border: 1px solid black;
    background-color: #ccc;
    width: 100px;
    height: 100px;
    position: absolute;
  }
  
  .line {
    width: 1px;
    height: 100px;
    background-color: black;
    position: absolute;
  }
  
  #box1 {
    top: 0;
    left: 0;
  }
  
  #box2 {
    top: 200px;
    left: 0;
  }
  
  #box3 {
    top: 250px;
    left: 200px;
  }
  
  #line1 {
    top: 100px;
    left: 50px;
    /*transform: rotate(222deg);
      -webkit-transform: rotate(222deg);
      -ms-transform: rotate(222deg);*/
  }
  
  #line2 {
    top: 220px;
    left: 150px;
    height: 115px;
    transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box" id="box1"&gt;&lt;/div&gt;
  &lt;div class="box" id="box2"&gt;&lt;/div&gt;
  
  
  &lt;div class="line" id="line1"&gt;&lt;/div&gt;
  
  
  &lt;div id="results"&gt;test&lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>