顯示按鈕/播放所有可拖動元素都被丟棄時的消息。 Adobe Edge動畫Javascript/jquery

Question

我正在嘗試使用Adobe Edge Animate創建拖放式交互，主要在Jquery和Javascript上運行。

然而，我希望所有的東西都是可拖動和可拖放的，所以我需要代碼來識別和計算正確的元素放在正確的目標上，當所有15個元素都被正確丟棄時我想要一個消息來播放一個按鈕將變得可見）。

進行分解： 計數，當元素1-15已正確跌落時element_1上target_1，掉線，sym.play（「BUTTONLABEL - 這將使按鈕可見）。

我目前正在使用的代碼如下：

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

我會嘗試使用一個變量，只是每當一個項目是在下降DROP掉迭代：功能。一旦計數器達到15，就應該執行該遊戲。

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