如何在draggable和droppable之间画一条线？

我正在使用优秀的JQuery UI来进行"映射",因此用户可以将人员从一个程序"映射"到其他程序的人员.

使用这个简单的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));
    });
});

我明白了:

我真正想要的是(如果可能的话)在Elsa和Kjell之间创建一条线, 这样就可以使它们之间的连接清晰.

我总是可以用方框内的数字来做,但我真的想知道如何使用线条来做到这一点.

谢谢.

更新(08.Jul.2013)更新了最新版本的库; 使用JsRender重构的html;

更新(29.Sep.2011)增加了GIT回购; 清理代码; 更新到最新的框架版本;

更新(03.Mar.2013)固定链接与工作示例;

当前示例使用:

HTML 5 doctype

jQuery v.1.10.2

jQuery UI v.1.10.3

拉斐尔 v.2.0.1

JsRender v.1pre35 (可选,用于HTML简化)

资源

Git Repository中的源代码

演示

JSBIN的页面演示

适用于FF,IE,Chrome,Safari和Opera.

测试:

Firefox 6和7 .. 22

IE 8和9 .. 10

Chrome 12+ .. 27

Safari 5+ .. 6

歌剧11.51 .. 15

为了向大家展示,我只是对我的成就做了一个小小的演示(今天我很自豪!):

视频演示

和一个小图像:

我太新了,不能发布链接,但如果你谷歌"图书馆简单绘图与jQuery",你可能会发现你在寻找什么.:)

链接在这里