53

我正在使用出色的 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之间建立一条线，这样它们之间的联系就很清楚了。

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

谢谢。

4

2 回答 2

65
  • 更新 (08.Jul.2013)更新了最新版本的库；使用 JsRender 重构 html；
  • 更新（2011 年 9 月 29 日）添加了 GIT 回购；清理代码；更新到最新的框架版本；
  • 更新（2013 年 3 月 3 日）固定链接与工作示例；

当前示例使用：

来源

Git 存储库中的源代码

演示

JSBIN 的页面演示

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

测试：

  • 火狐 6 和 7 .. 22
  • 即 8 和 9 .. 10
  • 铬 12+ .. 27
  • 野生动物园 5+ .. 6
  • 歌剧 11.51 .. 15

为了向大家展示，我只是做了一个小演示（我今天是一个骄傲的人！）：

视频演示

和一个小图像：

替代文字

于 2009-02-12T23:15:33.553 回答
5

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

链接在这里

于 2009-05-22T10:12:07.117 回答