如何绘制可拖动和可拖放之间的界限？ [英] How to draw a line between draggable and droppable?

问题描述

我使用优秀的JQuery UI来做一个映射，这样用户就可以将一个程序中的
个人映射到其他程序中的人员。

使用这个简单的JQuery：

  $（document）.ready（function（）{
 $（ （
 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）
 .r emoveAttr（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））; 
}）; 
}）; 
  

我得到这个结果：

< img src =https://i.stack.imgur.com/Cyynb.pngalt =alt text>

我真正想要的东西是（如果可能的话）在
Elsa 和 Kjell 之间创建一条线，以便它们之间的连接清晰。

我总是可以用箱子里面的数字来做，但我真的
想知道如何使用这些线条做到这一点。

感谢。

解决方案

• .2013）使用最新版本的库进行更新;使用JsRender重构html;
  
• 已更新（29.Sep.2011）添加了GIT Repo;清理了代码;更新到最新的框架版本;
  
• 更新（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简化）

来源

源代码 Git Repository

演示

JSBIN的页面演示

---

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

b

• Firefox 6和7 .. 22


• IE 8和9 .. 10


• Chrome 12+ .. 27


• Safari 5+ .. 6


• Opera 11.51..15

为了向大家展示我的成就（我今天是一个骄傲的人）：

$ b blockquote>


视频演示




和一张小图片：







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.

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

I get to this:

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.

Thanks.

解决方案

• 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;

Current example uses:

• 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)

Source

Source code in Git Repository

Demo

Page demo at JSBIN

---

Works on FF, IE, Chrome, Safari and Opera.

tested on:

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

Video demo

and a little image:

这篇关于如何绘制可拖动和可拖放之间的界限？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！