假设我们在一页中有多个可拖动元素和多个可放置目标。每个可拖动元素只有一个可放置目标。我的问题是:如何测试是否将正确的元素放在正确的目标上。这是一个示例小提琴:http: //jsfiddle.net/D25Rt/
这是示例中的代码:
$("#draggable-red, #draggable-blue, #draggable-green").draggable({ revert: "invalid", containment: "#content"});
$("#droppable-red").droppable({
accept: "#draggable-red",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(event, ui) {
$(this).addClass("ui-state-highlight").find("p").html("Touch down!");
}
});
$("#droppable-blue").droppable({
accept: "#draggable-blue",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(event, ui) {
$(this).addClass("ui-state-highlight").find("p").html("Touch down!");
}
});
$("#droppable-green").droppable({
accept: "#draggable-green",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(event, ui) {
$(this).addClass("ui-state-highlight").find("p").html("Touch down!");
}
});
更具体地说,关于前面的示例,如果我将蓝色球拖到红色框上,当我释放蓝色球时,我想显示一个警报(类似于“错误框...”)。我是 jQuery UI 的新手,有人可以给我一些关于我应该如何以及在哪里做的提示吗?在接受选项或丢弃选项中?