jQuery 如何在draggable和droppable之间画一条线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/536676/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw a line between draggable and droppable?
提问by balexandre
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 UI 进行“映射”，以便用户可以将一个程序中的人员“映射”到其他程序中的人员。
using this simple JQuery:
使用这个简单的 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 wantedwas (if possible) create a line between Elsaand Kjellso it makes the connection between them clear.
我真正想要的是（如果可能的话）在Elsa和Kjell之间划一条线， 这样它们之间的联系就会变得清晰。
I can always do it with numbers inside the boxes, but I really wanted to know how to do this using the lines.
我总是可以用盒子里的数字来做，但我真的很想知道如何使用线条来做到这一点。
Thanks.
谢谢。
回答by balexandre
- 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;
- 更新 (08.Jul.2013)更新了最新版本的库；使用 JsRender 重构的 html；
- 更新（2011 年 9 月 29 日）添加了 GIT 存储库；清理代码；更新到最新的框架版本；
- 更新 (03.Mar.2013)与工作示例的固定链接；
Current example uses:
当前示例使用：
- HTML 5 doctype
- jQueryv.1.10.2
- jQuery UIv.1.10.3
- Raphaelv.2.0.1
- JsRenderv.1pre35 (optional, used for HTML simplification)
Source
来源
Demo
演示
Works on FF, IE, Chrome, Safariand Opera.
适用于FF、IE、Chrome、Safari和Opera。
tested on:
测试：
- Firefox 6 and 7 .. 22
- IE 8 and 9 .. 10
- Chrome 12+ .. 27
- Safari 5+ .. 6
- Opera 11.51 .. 15
- Firefox 6 和 7 .. 22
- IE 8 和 9 .. 10
- 铬 12+ .. 27
- Safari 5+ .. 6
- 歌剧 11.51 .. 15
to show you all, I just made a little demo of my accomplishment (I am a proud person today!):
为了向大家展示，我只是做了一个我的成就的小演示（我今天是一个自豪的人！）：
and a little image:
和一个小图片：
