如何绘制可拖动和可拖放之间的界限? [英] How to draw a line between draggable and droppable?
问题描述
我使用优秀的JQuery UI来做一个映射,这样用户就可以将一个程序中的
个人映射到其他程序中的人员。
$(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)与工作示例的固定链接;
- 已更新(29.Sep.2011)添加了GIT Repo;清理了代码;更新到最新的框架版本;
当前示例使用:
来源
演示
适用于 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
Demo
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!):
and a little image:
这篇关于如何绘制可拖动和可拖放之间的界限?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!