Question

我正在使用优秀的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));
    });
});

我明白了：

alt text

我真正想要的是（如果可能的话）之间创建一条线 Elsa 和 Kjell 所以它使它们之间的联系变得清晰。

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

感谢

Answer 1

更新（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
Raphael v.2.0.1
JsRender v.1pre35 （可选，用于简化HTML）

来源

Source code in Git Repository

演示

Page demo at JSBIN

适用于 FF ， IE ， Chrome ， Safari 和 Opera 。

测试：

Firefox 6和7 .. 22
IE 8和9 .. 10
Chrome 12+ .. 27
Safari 5+ .. 6
Opera 11.51 .. 15

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

Video demo

和一个小图片：

alt text

Answer 2

我太新了，无法发布链接，但如果你谷歌“使用jQuery进行简单绘图库”，你可能会找到你想要的东西。：）

link here

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

2 个答案: