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:

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: