¿Cómo dibujar una línea entre arrastrable y desplegable?

Question

Estoy usando la excelente interfaz de usuario de JQuery para hacer un "mapeo" para que el usuario pueda "asignar" personas de un programa a personas de otro programa.

utilizando este sencillo JQuery:

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

llego a esto:

lo que realmente quería era (si es posible) crear una línea entre Elsa y Kjell por lo que hace que la conexión entre ellos sea clara.

Siempre puedo hacerlo con números dentro de las cajas, pero realmente quería saber cómo hacerlo usando las líneas.

Gracias.

Answer 1

• actualizado (08.Jul.2013) Actualizado con las últimas versiones de las bibliotecas; html refactorizado usando JsRender;
• actualizado (29.Sep.2011) Agregado GIT Repo; limpió el código; actualizar a las últimas versiones de framework;
• actualizado (03.Mar.2013) Enlaces fijos con ejemplos de trabajo;

ejemplo actual utiliza:

• HTML 5 DOCTYPE
• jQuery v.1.10.2
• jQuery UI v.1.10.3
• Raphael v.2.0.1
• JsRender v.1pre35 (opcional, utilizado para la simplificación de HTML)

Fuente

Source code in Git Repository

demostración

Page demo at JSBIN

---

Obras en FF, IE, Chrome, Safari y Opera.

ensayaron en:

• Firefox 6 y 7 .. 22
• IE 8 y 9 .. 10
• Chrome 12+ .. 27
• Safari 5+ .. 6
• Opera 11.51 .. 15

que le muestre todo, acaba de hacer una pequeña demostración de mi logro (soy un orgulloso por Hoy hijo):

Video demo

y un poco de la imagen:

Answer 2

Soy demasiado nueva para publicar un enlace, pero si google "Biblioteca de dibujo sencillo con jQuery ", puede encontrar lo que está buscando. :)

link here