JqueryUI Detect when a group of items are on their droppable target areas

Question

I have 4 drag and drop items, they thay all drag and dropp onto their targets, but should then fire off a 'welldone' event and the part is not working. I've had some help but can;t get this working, what am I doing wrong?

// insert code to be run when the symbol is created here
yepnope({nope:['scripts/jquery-ui-1.10.3.custom.min.js','scripts/jquery.ui.touch-punch.min.js'], complete: init})

// Initial state: not dropped
sym.setVariable("dropped", "false");

function init(){
//Use Jquery code for draggable and droppable

//Drag it
sym.$('scrambled_egg').draggable({opacity:.5, revert:'invalid'});

//Drop it on the target
sym.$('scrambled_target').droppable({
    accept:sym.$("scrambled_egg"),
    drop: function () {
    sym.getSymbol("scrambled_egg").play();

// Store that you dropped it
    sym.setVariable("dropped", "true");
    // Call a function to check if all the symbols are dropped
    // and fire event "done"
    checkIfAllDropped();
    }
    }
);

//Snap back to default state
sym.$('scrambled_default').droppable({
accept:sym.$("scrambled_target"),
drop: function () {
    // Back to not dropped state
    sym.setVariable("dropped", "false");
}
}
);

//End code chunk



//Use Jquery code for draggable and droppable
//Drag it
sym.$('fried_egg').draggable({opacity:.5, revert:'invalid'});

//Drop it on the target
sym.$('fried_target').droppable({
    accept:sym.$("fried_egg"),
    drop: function () {
    sym.getSymbol("fried_egg").play();

    // Store that you dropped it
    sym.setVariable("dropped", "true");
    // Call a function to check if all the symbols are dropped
    // and fire event "done"
    checkIfAllDropped();
    }
    }
);
//Snap back to default state
sym.$('fried_default').droppable({
accept:sym.$("fried_target"),
drop: function () {
    // Back to not dropped state
    sym.setVariable("dropped", "false");
}
}
);
//End code chunk

    //Use Jquery code for draggable and droppable
//Drag it
sym.$('poached_egg').draggable({opacity:.5, revert:'invalid'});

//Drop it on the target
sym.$('poached_target').droppable({
    accept:sym.$("poached_egg"),
    drop: function () {
    sym.getSymbol("poached_egg").play();

    // Store that you dropped it
    sym.setVariable("dropped", "true");
    // Call a function to check if all the symbols are dropped
    // and fire event "done"
    checkIfAllDropped();
    }
    }
);
//Snap back to default state
sym.$('poached_default').droppable({
accept:sym.$("poached_target"),
drop: function () {
    // Back to not dropped state
    sym.setVariable("dropped", "false");
}
}
);
//End code chunk

//Use Jquery code for draggable and droppable

//Drag it
sym.$('boiled_egg').draggable({opacity:.5, revert:'invalid'});

//Drop it on the target
sym.$('boiled_target').droppable({
    accept:sym.$("boiled_egg"),
    drop: function () {
    sym.getSymbol("boiled_egg").play();

    // Store that you dropped it
    sym.setVariable("dropped", "true");
    // Call a function to check if all the symbols are dropped
    // and fire event "done"
    checkIfAllDropped();
    }
    }
);

//Snap back to default state
sym.$('boiled_default').droppable({
accept:sym.$("boiled_target"),
drop: function () {
    // Back to not dropped state
    sym.setVariable("dropped", "false");
}
}
);
//End code chunk
}

checkIfAllDropped = function(){
var stage = AdobeEdge.getComposition("How_do_you_eat_yours").getStage();
var sym1 = stage.getSymbol("scrambled_target");
var sym2 = stage.getSymbol("fried_target");
var sym2 = stage.getSymbol("boiled_target");
var sym2 = stage.getSymbol("poached_target");
if(sym1.getVariable("dropped") === "true" &&
     sym2.getVariable("dropped") === "true" &&
     sym3.getVariable("dropped") === "true" &&
   sym4.getVariable("dropped") === "true"){
    // Fire event done!
    stage.play("welldone");
}
};

Thanks for your answer Ena, I'm trying to implement it, but not having much success. — John Cooper, Jul 08 '13 at 09:44

Ena · Answer 1 · 2013-07-09T14:22:32.467

I would do it this way: every time you drop an element you store this event somewhere and you check if all the elements are dropped. For example:

// Initial state: not dropped
sym.setVariable("dropped", "false");

sym.$('scrambled_target').droppable({
    accept:sym.$("scrambled_egg"),
    drop: function () {
        sym.getSymbol("scrambled_egg").play();

        // Store that you dropped it
        sym.setVariable("dropped", "true");
        // Call a function to check if all the symbols are dropped
        // and fire event "done"
        checkIfAllDropped();
    }
    }
);

sym.$('scrambled_default').droppable({
    accept:sym.$("scrambled_egg"),
    drop: function () {
        // Back to not dropped state
        // EDIT HERE! Dind't get that sym was your stage.
        // AND EDIT EVERYWHERE ELSE.
        sym.getSymbol("scrambled_egg").setVariable("dropped", "false");
    }
    }
);

The checkIfAllDropped() function will look something like this:

checkIfAllDropped = function(){
    var stage = AdobeEdge.getComposition("COMPOSITION_CLASS_NAME").getStage();
    var sym1 = stage.getSymbol("sym1");
    var sym2 = stage.getSymbol("sym2");
    if(sym1.getVariable("dropped") === "true" &&
       sym2.getVariable("dropped") === "true"){
        // Fire event done!
        stage.play("done");
    }
};

Be careful on your checkIfAllDropped function you are assigning var sym2 multiple times.

checkIfAllDropped = function(){
var stage = AdobeEdge.getComposition("How_do_you_eat_yours").getStage();
var sym1 = stage.getSymbol("scrambled_target");
// Here...
var sym2 = stage.getSymbol("fried_target");
// Here...
var sym2 = stage.getSymbol("boiled_target");
// Here...
var sym2 = stage.getSymbol("poached_target");
if(sym1.getVariable("dropped") === "true" &&
     sym2.getVariable("dropped") === "true" &&
     sym3.getVariable("dropped") === "true" &&
   sym4.getVariable("dropped") === "true"){
    // Fire event done!
    stage.play("welldone");
}
};

Please debug your code before posting it again!

Here's the code I have. I have four items, but they are not firing off the 'welldone' event when they are all dropped on their targets. What am I doing wrong? — John Cooper, Jul 08 '13 at 10:24

JqueryUI Detect when a group of items are on their droppable target areas

1 Answers1