title: Line SVG dynamic
body: <p>I'm trying to redraw the line while the object is moved.</p>
  
  <p>I already have the points x and y start and end of the line (x1, y1, x2, y2) but I can not redraw the line at the drag event.</p>
  
  <p>Below is the code and the link jsFiddle:</p>
  
  <p><a href="https://jsfiddle.net/rafaelcb21/vtga3119/2/" rel="nofollow">https://jsfiddle.net/rafaelcb21/vtga3119/2/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-2.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;style&gt;
      body {
          padding:0px;
          margin:0px;
          width: 3300px;
          height: 5000px
      }
  
      svg {
         position:absolute;
         width:100%;
         height:100%;
         top:0px;
         z-index:-1;
      }
  
      .table {
          position:absolute;
          cursor:pointer; 
          border-top: solid 1px;
      }
  
      .table.node2 {
          left: 353px;
          top: 383px;
      }
  
      .td {           
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 7px;
          padding-right: 7px;
          border-style: solid;
          border-top-width: 0px;
          border-bottom-width: 1px;
          border-left-width: 1px;
          border-right-width: 1px;
        }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class='table node1'&gt;
      &lt;div class='td' id='Table_1'&gt;Table_1&lt;/div&gt;
      &lt;div class='td' id='test_11'&gt;test_1&lt;/div&gt;
      &lt;div class='td' id='test_12'&gt;test_2&lt;/div&gt;
      &lt;div class='td' id='test_13'&gt;test_3&lt;/div&gt;
      &lt;div class='td' id='test_14'&gt;test_4&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='table node2'&gt;
      &lt;div class='td' id='Table_2'&gt;Table_2&lt;/div&gt;
      &lt;div class='td' id='test_21'&gt;test_1&lt;/div&gt;
      &lt;div class='td' id='test_22'&gt;test_2&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;svg&gt;
      &lt;line id='test_13_test_21' style='stroke:rgb(255,0,0)'&gt;&lt;/line&gt;
  &lt;/svg&gt;
  
  &lt;script&gt;
      $(".node1").draggable(
          {
            drag: function(){
                  //OUT
                  var test_13= $("#test_13");
                  var test_13_position = test_13.offset();
                  test_13_position_top_y = test_13_position.top + 9
                  test_13_position_left_x = test_13_position.left + test_13.width() + 15;
          }
      });
  
      $(".node2").draggable(
          {
            drag: function(){
                  //IN
                  var test_21= $("#test_21");
                  var test_21_position = test_21.offset();
                  test_21_position_top_y = test_21_position.top + 9
                  test_21_position_left_x = test_21_position.left + 1;
          }
      });
  
      //OUT
      var test_13= $("#test_13");
      var test_13_position = test_13.offset();
      test_13_position_top_y = test_13_position.top + 9
      test_13_position_left_x = test_13_position.left + test_13.width() + 15;
  
      //IN
      var test_21= $("#test_21");
      var test_21_position = test_21.offset();
      test_21_position_top_y = test_21_position.top + 9
      test_21_position_left_x = test_21_position.left + 1;
  
      //LINE
      $('#test_13_test_21').attr({
          'x1': test_13_position_left_x,
          'y1': test_13_position_top_y,
          'x2': test_21_position_left_x,
          'y2': test_21_position_top_y
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>