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:

alt text

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.

balexandre · Accepted Answer · 2015-05-11T04:57:50.297

65

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:

alt text

edited May 11 '15 at 04:57

answered Feb 12 '09 at 23:15

balexandre

73,608
45
233
342

only if you use Silverlight :( no SVG support in IE8 either, only in FF. – balexandre May 21 '09 at 08:14
"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 ;) – balexandre May 22 '09 at 13:26
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 May 22 '09 at 13:27
i tried that page using IE7 and it didn't work. did you test using IE8? – Dan Wolchonok May 22 '09 at 13:31
I use IE 8 here and works fine... I'll make a new ScreenCast showing both browsers – balexandre May 22 '09 at 13:39
added new screencast with IE8, FF3 and Chrome – balexandre May 22 '09 at 13:50
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. – Robert K May 22 '09 at 13:50
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. – Robert K May 22 '09 at 13:52
@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 May 22 '09 at 13:56
I use the Helper as a clone object ... works nicely, thanks for the feedback @The Wicked Flea – balexandre May 22 '09 at 14:13
buggy in current chrome. Also: line do not redraw after resize of the browser window (e.g. responsive behaviour) – ProblemsOfSumit Nov 30 '15 at 09:42
@Submit we're not here to do your homework... take the project that is in GIT and use it if you want, improve it if you like... but this is a 2009 question... – balexandre Nov 30 '15 at 11:19
It worked fine. But when I try on the mobile, it doesn't worked. Anyone can help this please? – BestMob Nov 16 '20 at 10:43
@BestMob this was something I made in 2009 ... I tried to simply update to make it work during the next years when the tooling had breaking changes but only for this example. Nowadays, maybe there might be a better way to do it?... – balexandre Nov 16 '20 at 23:16
It would be great if you can make touch event working on the mobile soon, thank you. – BestMob Nov 19 '20 at 03:55

score 5 · Answer 2 · edited May 22 '09 at 12:20

5

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

edited May 22 '09 at 12:20

balexandre

73,608
45
233
342

answered May 22 '09 at 10:12

Will Moore

116
1
2

I googled, this page was the first reference to what I really had in mind, mmm, thank you @balexandre – Ayyash Apr 25 '13 at 07:10

How to draw a line between draggable and droppable?

2 Answers2

Linked