删除所有可拖动元素时显示按钮/播放消息.Adobe Edge动画Javascript/Jquery

Show button/Play Message when all draggable elements are dropped. Adobe Edge Animate Javascript/Jquery

本文关键字：消息 播放 Adobe 动画 Jquery Javascript Edge 按钮 拖动 元素 显示      更新时间：2023-09-26

我正试图使用Adobe Edge Animate创建一个拖放交互，它主要运行在Jquery和Javascript上。

一切都是可以拖动和丢弃的，正如我所希望的，然而，当正确的元素被放置在正确的目标上时，我需要代码来识别和计数，当所有15个元素都被正确放置时，我希望播放一条消息（其中一个按钮将可见）。

要将其分解：当元素_1被放置在target_1上时进行计数，当元素1-15被正确放置时，符号播放（'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();
}});

我会尝试使用一个变量，只要在drop:函数中放入一个项，该变量就会迭代。一旦计数器达到15，它就应该执行播放。

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