How to draw a line between draggable and droppable?

Hi guys,

I'm using the exelent JQuery UI to do a "mapping" so the user can "map" persons from one program to persons from other program.

using this 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));
    });
});

I get to this:

what I really wanted was (if possible) create a line between Elsa and Kjell so it makes understanded what the link was.

I can always do it with numbers inside the boxes, but I really wanted to know how to do this using the lines.

Thanks.

From stackoverflow

• updated (22.May.2009) works on IE as well...

  I got it! Works on FF, IE, Chrome and Safari. Under Opera it draws no lines (no SVG).

  to show you all, I just made a little demo of my accomplishment (I am a proud person today!):

  Video demo: http://is.gd/2obC4 -> NEW Screecast with IE 8, FF 3, Safari 4, Opera 10 and Chrome 3

  and a little image:

  

  All done using:

  • jQuery v.1.3.2
  • jQuery UI v.1.7.1
  • jQuery SVG plugin v.1.3.2
  • jQuery Dimensions Plugin v.1.2 [deprecated] included in jQuery 1.3.2+
  • jQuery Drawing Library

  source code can be found in:

  Page demo: http://is.gd/Cmmi

  Download Source: http://is.gd/ClWx (120Kb - all plugins included)

  Dan Wolchonok : any progress on making this work in IE?

  balexandre : only if you use Silverlight :( no SVG support in IE8 either, only in FF.

  duckyflip : Does not work in Safari/Chrome/Webkit...

  balexandre : "no one uses that" :) ... it was working only on FF, and now FF and IE ... one browser at a time mate ;) -> I use FF in my Mac ;)

  Dan Wolchonok : i looked into this quickly, it seems like you could do this with excanvas. similary to what flot (http://code.google.com/p/flot/) does.

  Dan Wolchonok : i tried that page using IE7 and it didn't work. did you test using IE8?

  balexandre : I use IE 8 here and works fine... I'll make a new ScreenCast showing both browsers

  balexandre : added new screencast with IE8, FF3 and Chrome

  The Wicked Flea : There's only 1 bug: if you drop short of a person the box stays there. Thus the box, when dropped on a person, goes back to its misplaced position and a line is drawn there. You should implement a snap-back when not dropped on a valid target.

  The Wicked Flea : I forgot to mention that the algorithm used for the line, when the box is misplaced, doesn't connect properly; the line goes to the center of the recipient, it would seem.

  balexandre : @The Wicked Flea your right :) this was something I started to answer my own question, some more things to accomplish to have it right. But is a good place to start if someone is searching for the same behavior, don't you agree?

  balexandre : I use the Helper as a clone object ... works nicely, thanks for the feedback @The Wicked Flea

• what is the need to implement smthing for IE ? It's just a zombie, I'll not trash a minute for it

  balexandre : it works fine on IE.

• I'm too new to post a link but if you google "Library for simple drawing with jQuery", you may find what you're looking for. :)

  link here

  balexandre : Fantastic, thank you :) I didn't know that was a new SVG version as well...

• Great! Impossible is nothing. :)

  balexandre : this is not an answer, please remove it and add it as a comment :) and while you're new to this, please read the FAQ ;)

• how to clea, remove any one of line