title: jsplumb drag and drop connections are going to the wrong element
body: <p>I have 2 (or more) draggable divs with a left side and a right side. I want to be able to drag a connection from the right side of the div to the left side of another div. However when I try to do that the connection appears to be working up until I drop the connection. Once I've dropped the connection it draws the connection to itself.</p>
  
  <p>How it currently is working:</p>
  
  <p><img src="https://i.stack.imgur.com/YsEPo.png" alt="Connection drawn to itself"></p>
  
  <p>How I would like it to work:</p>
  
  <p><img src="https://i.stack.imgur.com/KOwSA.png" alt="Connection right before I drop"></p>
  
  <p>My attempt:</p>
  
  <pre><code>$(".box").draggable();
  var startpointOptions = { isSource:true };
  var startpoint = jsPlumb.addEndpoint($('.rBox'), startpointOptions);
  var endpointOptions = { isTarget:true };
  var endpoint = jsPlumb.addEndpoint($('.lBox'), endpointOptions);
  </code></pre>
  
  <p>Here is my jsFiddle: <a href="http://jsfiddle.net/99RwZ/1/" rel="nofollow noreferrer">http://jsfiddle.net/99RwZ/1/</a></p>
  
  <p><strong>EDIT:</strong> Pruthvi Bharadwaj got it: <a href="http://jsfiddle.net/99RwZ/4/" rel="nofollow noreferrer">http://jsfiddle.net/99RwZ/4/</a></p>