web-dev-qa-db-fra.com

Comment tracer une ligne entre draggable et droppable?

J'utilise l'excellente interface utilisateur JQuery pour faire un "mappage" afin que l'utilisateur puisse "mapper" des personnes d'un programme à des personnes 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'y arrive:

alt text

ce que je voulais vraiment était (si possible) créer une ligne entre Elsa et Kjell afin que la connexion entre eux soit claire.

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

Merci.

jqueryhtmljquery-uidrawingsvg
52
balexandre
  • mis à jour (08.juil.2013) mis à jour avec les dernières versions des bibliothèques; html refactorisé à l'aide de JsRender;
  • mise à jour (29.Sep.2011) Ajout de GIT Repo; nettoyé le code; mise à jour vers les dernières versions du framework;
  • mis à jour (03.Mar.2013) Liens fixes avec exemple de travail;

L'exemple actuel utilise:

La source

Code source dans Git Repository

Démo

Démo de page sur JSBIN

Fonctionne sur [~ # ~] ff [~ # ~] , [~ # ~] ie [~ # ~] , Chrome , Safari et Opera .

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 tout, je viens de faire une petite démo de mon accomplissement (je suis fier aujourd'hui!):

Démo vidéo

et une petite image:

alt text

65
balexandre

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

lien ici

5
Will Moore