如何在可拖动和可放置之间划清界限？

我正在使用优秀的 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 and Kjell所以这使得它们之间的联系变得清晰。

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

Thanks.

• 更新（2013 年 7 月 8 日）更新了最新版本的库；使用 JsRender 重构 html；
• 更新（2011 年 9 月 29 日）添加了 GIT 存储库；清理代码；更新到最新的框架版本；
• 更新（2013 年 3 月 3 日）修复了工作示例的链接；

当前示例使用：

• HTML 5 文档类型
• jQuery http://jquery.com/v.1.10.2
• jQuery用户界面 http://jqueryui.com/v.1.10.3
• Raphael http://raphaeljs.com/ v.2.0.1
• JsRender https://github.com/BorisMoore/jsrenderv.1pre35（可选，用于 HTML 简化）

Source

源代码在Git 存储库 https://github.com/balexandre/Draggable-Line-to-Droppable

Demo

JSBIN 的页面演示 http://jsbin.com/aliniz/2/edit

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

测试于：

• 火狐 6 和 7 .. 22
• IE 8 和 9 .. 10
• Chrome 12+ .. 27
• Safari 5+ .. 6
• 歌剧 11.51 .. 15

为了向大家展示，我刚刚做了一个我的成就的小演示（今天我是一个自豪的人！）：

和一个小图片：