Question

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! 🙂

Answer 1

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();
    };  
},