Databases
StackOverflow2013
Postsdbo
POJqueryUI Detect when a group of items are on their droppable target areas
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJqueryUI Detect when a group of items are on their droppable target areas
    text
    copied!<p>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?</p> <pre><code>// 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" &amp;&amp; sym2.getVariable("dropped") === "true" &amp;&amp; sym3.getVariable("dropped") === "true" &amp;&amp; sym4.getVariable("dropped") === "true"){ // Fire event done! stage.play("welldone"); } }; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload