ejemplos - resizable jquery

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

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.

usando este simple 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, de modo que quede clara la conexión entre ellos.

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

Gracias

Answer 1

Soy demasiado nuevo para publicar un enlace, pero si buscas en Google "Biblioteca para dibujo simple con jQuery", puedes encontrar lo que estás buscando. :)

enlace aquí

Answer 2

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

El ejemplo actual usa:

• HTML HTML tipo de documento
• 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

Código fuente en Git Repository

Manifestación

Demostración de página en JSBIN

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

probado en:

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

para mostrarles a todos, acabo de hacer una pequeña demostración de mi logro (¡soy una persona orgullosa hoy!):

Demostración de video

y una pequeña imagen: