Afficher le bouton/Lire le message lorsque tous les éléments déplaçables sont supprimés. Adobe Edge Animate Javascript/Jquery

Question

Je tente de créer une interaction glisser-déposer en utilisant Adobe Edge Animate qui fonctionne principalement sur Jquery et Javascript.

Tout est draggable et largable que je souhaite, cependant, j'ai besoin du code pour reconnaître et compter lorsque l'élément correct est tombé sur la bonne cible, lorsque les 15 éléments sont supprimés correctement Je veux un message à jouer (dans lequel un bouton sera rendu visible).

Pour le briser: comte quand ELEMENT_1 tombe sur target_1, lorsque les éléments 1-15 ont été supprimés correctement, sym.play ('ButtonLabel - qui fera un bouton visible).

Le code J'utilise actuellement est ci-dessous:

yepnope({nope:['jquery-ui.min.js'], complete: init}); 

function init(){ 
    //Drag 
    sym.$('Designed').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('Interactive').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('Evaluated').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('Raised').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('Clear').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('Created').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('Fundraising').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('Communicated').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('LongLasting').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('Saved').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('Increased').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('Organisations').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('Organised').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('Achieving').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

sym.$('IncreasedConfidence').draggable({ 
    opacity: 0.5, 
    revert: 'invalid', 
}); 

//Drop 
sym.$('DesignedTarget').droppable({ 
    accept: sym.$('Designed'), 
    drop: function() { 
     sym.getSymbol("Designed").play(); 
} 
}); 

sym.$('EvaluatedTarget').droppable({ 
    accept: sym.$('Evaluated'), 
      drop: function() { 
       sym.getSymbol("Evaluated").play(); 
      } 
}); 

sym.$('CreatedTarget').droppable({ 
    accept: sym.$('Created'),  
    drop: function() { 
     sym.getSymbol("Created").play(); 
}}); 

sym.$('CommunicatedTarget').droppable({ 
    accept: sym.$('Communicated'), 
    drop: function() { 
     sym.getSymbol("Communicated").play(); 
}}); 

sym.$('OrganisedTarget').droppable({ 
    accept: sym.$('Organised'), 
    drop: function() { 
     sym.getSymbol("Organised").play(); 
}}); 

sym.$('InteractiveTarget').droppable({ 
    accept: sym.$('Interactive'),  
    drop: function() { 
     sym.getSymbol("Interactive").play(); 
}}); 

sym.$('FundraisingTarget').droppable({ 
    accept: sym.$('Fundraising'),  
    drop: function() { 
     sym.getSymbol("Fundraising").play(); 
}}); 

sym.$('OrganisationsTarget').droppable({ 
    accept: sym.$('Organisations'), 
    drop: function() { 
     sym.getSymbol("Organisations").play(); 
}}); 

sym.$('LongLastingTarget').droppable({ 
    accept: sym.$('LongLasting'),  
    drop: function() { 
     sym.getSymbol("LongLasting").play(); 
}}); 

sym.$('ClearTarget').droppable({ 
    accept: sym.$('Clear'), 
    drop: function() { 
     sym.getSymbol("Clear").play(); 
}}); 

sym.$('RaisedTarget').droppable({ 
    accept: sym.$('Raised'), 
    drop: function() { 
     sym.getSymbol("Raised").play(); 
}}); 

sym.$('SavedTarget').droppable({ 
    accept: sym.$('Saved'), 
    drop: function() { 
     sym.getSymbol("Saved").play(); 
}}); 

sym.$('IncreasedTarget').droppable({ 
    accept: sym.$('Increased'), 
    drop: function() { 
     sym.getSymbol("Increased").play(); 
}}); 

sym.$('AchievingTarget').droppable({ 
    accept: sym.$('Achieving'), 
    drop: function() { 
     sym.getSymbol("Achieving").play(); 
}}); 

sym.$('IncreasedConfidenceTarget').droppable({ 
    accept: sym.$('IncreasedConfidence'),  
    drop: function() { 
     sym.getSymbol("IncreasedConfidence").play(); 
}}); 

Answer 1

Je voudrais essayer d'utiliser une variable seulement à chaque fois qu'un élément itère est droped dans la liste: fonction. Une fois que le compteur atteint 15, il devrait simplement exécuter le jeu.

$counter = 0; 
.... 
sym.$('SavedTarget').droppable({ 
    accept: sym.$('Saved'), 
    drop: function() { 
     $counter += 1; 
     sym.getSymbol("Saved").play(); 
}}); 
.... 
if($counter == 15) { 
    sym.play('ButtonLabel'); 
}