假設我們在一個頁面中有多個可拖動的元素和多個可放置的目標。每個可拖動元素只有一個可放置目標。我的問題是:如何測試正確的元素是否被放在正確的目標上。 下面是一個例子小提琴:http://jsfiddle.net/D25Rt/爲可拖動的對象設置條件時 - jquery - UI
這是從示例代碼:
$("#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的新手,有人能給我一些關於如何以及應該在哪裏做的提示嗎?在接受選項或在下降選項?
您需要使用'draggable'的'stop'方法。請閱讀更多信息:http://api.jqueryui.com/draggable/#event-stop – ahren