如何在draggable和droppable之间画一条线? [英] How to draw a line between draggable and droppable?

问题描述

我正在使用出色的 JQuery UI 进行映射"，以便用户可以映射"从一个程序到另一个程序的人.

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.

使用这个简单的 JQuery:

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));
    });
});

我明白了:

我真正想要的是(如果可能的话)在Elsa 和 Kjell 使他们之间的联系变得清晰.

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.

谢谢.

推荐答案

• 更新(2013 年 7 月 8 日) 更新了最新版本的库；使用 JsRender 重构的 html；
• 更新(2011 年 9 月 29 日) 添加了 GIT 存储库；清理代码；更新到最新的框架版本；
• 更新(2013 年 3 月 3 日) 固定链接与工作示例；
• 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;

当前示例使用:

• HTML 5 文档类型
• jQuery v.1.10.2
• jQuery UI v.1.10.3
• Raphael v.2.0.1
• JsRender v.1pre35 (可选，用于 HTML 简化)
• 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)

来源

Git 存储库中的源代码

演示

JSBIN 页面演示

<小时>

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

测试:

• Firefox 6 和 7 .. 22
• IE 8 和 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!):

视频演示

还有一个小图片:

这篇关于如何在draggable和droppable之间画一条线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！