我正在使用优秀的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));
});
});
Run Code Online (Sandbox Code Playgroud)
我明白了:

我真正想要的是(如果可能的话)在Elsa和Kjell之间创建一条线, 这样就可以使它们之间的连接清晰.
我总是可以用方框内的数字来做,但我真的想知道如何使用线条来做到这一点.
谢谢.