How to draw a line between draggable and droppable?

Question

I'm using the excellent 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 the connection between them clear.

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

Thanks.

Answer 1

• updated (08.Jul.2013) Updated with latest versions of libraries; html refactored using JsRender;
• updated (29.Sep.2011) Added GIT Repo; cleaned the code; update to latest framework versions;
• updated (03.Mar.2013) Fixed links with working example;

Current example uses:

• HTML 5 doctype
• jQuery v.1.10.2
• jQuery UI v.1.10.3
• Raphael v.2.0.1
• JsRender v.1pre35 (optional, used for HTML simplification)

Source

Source code in Git Repository

Demo

Page demo at JSBIN

---

Works on FF, IE, Chrome, Safari and Opera.

tested on:

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

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

Video demo

and a little image:

Answer 2

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