Comment tracer une ligne entre draggable et droppable ?

Question

J'utilise l'excellente interface utilisateur JQuery pour faire un "mappage" afin que l'utilisateur puisse "mapper" les personnes d'un programme à celles d'un autre programme.

en utilisant ce 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));
    });
});

J'en arrive à ça :

ce que je voulais vraiment était (si possible) de créer une ligne entre Elsa et Kjell pour que le lien entre eux soit clair.

Je peux toujours le faire avec des chiffres à l'intérieur des cases, mais je voulais vraiment mais je voulais vraiment savoir comment le faire en utilisant les lignes.

Merci .

Answer 1

• mis à jour (08.Jul.2013) Mise à jour avec les dernières versions des bibliothèques ; html refactorisé en utilisant JsRender ;
• mis à jour (29.Sep.2011) Ajouté GIT Repo ; nettoyé le code ; mise à jour avec les dernières versions du framework ;
• mis à jour (03.Mar.2013) Correction des liens avec un exemple fonctionnel ;

Exemple actuel d'utilisation :

• Doctype HTML 5
• jQuery v.1.10.2
• jQuery UI v.1.10.3
• Raphael v.2.0.1
• JsRender v.1pre35 (facultatif, utilisé pour la simplification du HTML)

Source :

Code source dans Dépôt Git

Démo

Démonstration de la page à JSBIN

---

Travaux sur FF , IE , Chrome , Safari et Opéra .

testé sur :

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

pour vous montrer à tous, je viens de faire une petite démo de mon accomplissement (je suis une personne fière aujourd'hui !) :

Démonstration vidéo

et une petite image :

Answer 2

Je suis trop nouveau pour poster un lien mais si vous cherchez sur Google "Bibliothèque de dessin simple avec jQuery", vous trouverez peut-être ce que vous cherchez :)

lien ici