如何在draggable和droppable之间划清界限？
如何在draggable和droppable之间划清界限？
提问于 2009-02-11 13:08:38
我正在使用优秀的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之间创建一条线，这样就可以清楚地了解它们之间的联系。
我总是可以在方框中使用数字，但我真的很想知道如何使用行来做到这一点。
感谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2009-02-12 23:15:34
- updated (2013年7月8日)使用最新版本的库进行了更新；使用JsRender;
- updated (2011年9月29日)进行了重构；添加了GIT Repo；清除了代码；更新到最新的框架html (2013年3月3日)修复了链接和工作示例；
当前示例使用：
- HTML5 doctype
- jQuery v.1.10.2
- jQuery UI v.1.10.3
- Raphael v.2.0.1
- JsRender v.1pre35 (可选，用于HTML simplification)
来源
演示
适用于FF、IE、Chrome、Safari和Opera。
测试对象：
- Firefox 6和7 ..22
- IE 8和9 ..10
- Chrome 12+ ..27
- Safari 5+ ..6
- Opera11.51..15
为了向大家展示，我只是做了一个我的成就的小演示(我今天是一个骄傲的人！)：
下面是一张小图片：
Stack Overflow用户
发布于 2009-05-22 10:12:07
我太新了，不能发布链接，但是如果你在谷歌上搜索“用jQuery进行简单绘图的库”，你可能会找到你想要的。:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/536676
复制相关文章
相似问题