title: How to draw a line between draggable and droppable?
body: <p>I'm using the excellent JQuery UI to do a "mapping" so the user can "map"
  persons from one program to persons from other program.</p>
  
  <p>using this simple JQuery:</p>
  
  <pre><code>$(document).ready(function() {
      $("div .draggable").draggable({
          revert: 'valid',
          snap: false
      });
  
      $("div .droppable").droppable({
          hoverClass: 'ui-state-hover',
          helper: 'clone',
          cursor: 'move',
          drop: function(event, ui) {
              $(this)
                  .addClass('ui-state-highlight')
                  .find("img")
                  .removeAttr("src")
                  .attr("src", "_assets/img/icons/check-user-48x48.png");
  
              $(this).droppable('disable');
  
              $(ui.draggable)
                  .addClass('ui-state-highlight')
                  .find("img")
                  .removeAttr("src")
                  .attr("src", "_assets/img/icons/check-user-48x48.png");
  
              $(ui.draggable).draggable('disable');
          }
      });
  
      $("div .droppable").bind("dblclick", function() {
          $(this)
              .removeClass('ui-state-highlight')
              .find("img")
              .removeAttr("src")
              .attr("src", "_assets/img/icons/user-48x48.png");
          $(this).droppable('enable');
  
          EnableSource($(this));
      });
  });
  </code></pre>
  
  <p>I get to this:</p>
  
  <p><img src="https://i.stack.imgur.com/Cyynb.png" alt="alt text"></p>
  
  <p><strong>what I really wanted</strong> was (if possible) create a line between 
  <strong>Elsa</strong> and <strong>Kjell</strong> so it makes the connection between them clear.</p>
  
  <p>I can always do it with numbers inside the boxes, but I really 
  wanted to know how to do this using the lines.</p>
  
  <p><strong>Thanks</strong>.</p>