Sürükle ve bırakılabilir arasında nasıl çizgi çizilir?

Question

Mükemmel JQuery UI'yi "mapping" yapmak için kullanıyorum, böylece kullanıcı bir programdan diğer programdaki kişilere "map" (harita) verebilir " .

$(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)); 
    }); 
}); 

Ben bu olsun: bu basit JQuery kullanarak

Gerçekten (mümkünse) Elsa arasında bir çizgi oluşturmak oldu ne istediğini

ve Kjell böylece aralarındaki bağlantıyı temizler.

Her zaman kutuların içindeki sayılarla yapabilirim, ancak gerçekten satırları kullanarak bunu nasıl yapacağımızı bilmek istedim.

Teşekkürler.