I am trying to trigger a drop
event only on condition that all draggables
are dropped.
drop: function(event,ui){
var dropd = "#"+ui.draggable.attr("id");
if("#a_dra" && "#b_dra" && "#c_dra" && "#d_dra" == dropd){
$("#whistle").get(0).play();
dfd.resolve();
};
},
With this code
there is a problem. It works when every div
is dropped and triggers correctly. Except when I drop only the #a_dra
and #d_dra
, it triggers as well, which is not desirable, since I need it random.
What am I missing in there?
Thanks in advance! :)
if("#a_dra" && "#b_dra" && "#c_dra" && "#d_dra" == dropd){
The above line actually means
if(("#a_dra" == true) && ("#b_dra" == true) && ("#c_dra" == true) && ("#d_dra" == dropd)) {
You cannot shorthand comparison to multiple values like that.
You can keep state for each draggable that gets dropped, so you can check if all of them have been dropped so that you can resolve your deferred:
var dropped = {}
....
drop: function(event,ui){
var dropd = "#"+ui.draggable.attr("id");
dropped[dropd] = true;
if(dropped["#a_dra"] && dropped["#b_dra"] && dropped["#c_dra"] && dropped["#d_dra"]){
$("#whistle").get(0).play();
dfd.resolve();
};
},