0

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! :)

rudolf
  • 61
  • 1
  • 7

1 Answers1

4
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();
    };  
},
lanzz
  • 42,060
  • 10
  • 89
  • 98
  • So it should be like `if(("#a_dra" == dropd) && ("#b_dra" == dropd) && ("#c_dra" == dropd) && ("#d_dra" == dropd)) {` ? Because it does not trigger. – rudolf Oct 28 '12 at 19:15
  • No, that would mean you want `dropd` to be equal to _all_ of those values at the same time. You want `||` instead of `&&`. – lanzz Oct 28 '12 at 19:53
  • But then the `deferred` resolves on the first `drop`. I just can't really wrap my head around this, what would be your suggested syntax then? – rudolf Oct 28 '12 at 20:26
  • If I only knew what you meant with `var dropped = {}`. :D But it works and I am grateful! :) – rudolf Oct 28 '12 at 20:47
  • `var dropped = {}` defines a new local variable named `dropped` and initializes it with an empty object (`{}` is an [object literal constructor](https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Using_object_initializers)). – lanzz Oct 28 '12 at 21:13
  • Well, then it means I still have a lot to learn. Thanks again! – rudolf Oct 28 '12 at 21:16