How to draw a line between draggable and droppable?

Question

I use the excellent jQuery user interface to perform “matching” so that the user can “map” faces from one program to faces from another 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) to create a line between Elsa and Kjell , so he makes the connection between them understandable.

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

Thank you

Answer 1

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

The 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 to simplify HTML)

Source

Source Code in Git Repository

Demo

Page demo in JSBIN

---

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

tested for:

• 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 small demonstration of my success (today I am a proud person!):

Video demonstration

and a small image:

Answer 2

I'm too new to post the link, but if you google "jQuery Easy Drawing Library", you may find what you are looking for. :)

link here