how to draw a line between draggable and droppable

how to draw a line between draggable and droppable  using -'jquery,html,jquery-ui,drawing,svg'

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) {
                .attr("src", "_assets/img/icons/check-user-48x48.png");


                .attr("src", "_assets/img/icons/check-user-48x48.png");


    $("div .droppable").bind("dblclick", function() {
            .attr("src", "_assets/img/icons/user-48x48.png");


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.


asked Sep 16, 2015 by devkumargupta
0 votes

1 Answer

0 votes
  • 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:


Source code in Git Repository


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:

alt text

answered Sep 16, 2015 by abhimca2006