Einer meiner revert Objekte für Drag n Drop mit der Funktion ist auf halbem Weg falsch in Adobe Edge Animate

Question

ich die Antwort hier für revert auf diesem Thread angewandt (Adding a function to jQuery draggable revert "event"), aber ich habe immer noch ein Problem. Wenn das falsche Symbol in das Pulldown-Menü verschoben wird, wird das Manager-Symbol aus irgendeinem Grund nicht an seinem Platz angezeigt, sondern versteckt und zeigt das richtige Symbol an, wenn es nicht zurückgesetzt wird und korrekt ist. Die Rückmeldung ist falsch, welches ist was soll. Alle anderen kehren zurück und zeigen Feedback wie erwartet, wenn ich sie in das falsche Dropable lege. Das ist seltsam, dass man anders handeln würde. Alle richtigen tun, was sie tun sollen. Das Setup: Ich habe einen langen Hintergrund mit Symbolen, die mit Keydown-Ereignissen beweglich sind. Auf der Oberseite habe ich einen (festen) Balken mit den Droppables und den versteckten Symbolen, die auf korrekt ziehbarem erscheinen werden, während die tatsächlichen ziehbaren Elemente sich verstecken. Dies liegt daran, dass sich die ziehbaren Elemente ansonsten mit dem Hintergrund bewegen würden, da es sich um ein anderes div als die Leiste handelt, in der sich die drop-fähigen Elemente befinden.
Hoffe das macht Sinn.

var icons = ['GOALS','CUSTOMER','MANAGER','PRODUCT','PRICE','DELIVER','BALANCE']; 

for(j=0;j<icons.length;j++){  
    sym.$(icons[j]).addClass('drag'+j); 
    // each draggable corresponds to a droppable 
    // by class name indexed 
    sym.$('.drag'+j).draggable({  
     revert: function(obj){ 
      if(obj===false){     
       // add feedback screen and sound and revert icon 
       sym.$('wrong').attr('src',"images/wrongSpot.png"); 
       sym.$('wrong').animate({'top': 23},1000);  
       sym.$("incorrectFX")[0].play();   
       return true; 
      }else{ 
       return false; 
      }// end if else statement   
     }// end revert 
    });// end draggable 

    sym.$('d'+j).droppable({ 
     accept: ".drag"+j, 
     drop: dropEvent 
    }); // end droppable 
} // end for loop 

k = 0; 
function dropEvent(event, ui){ 
    ui.draggable.position({ of: $(this), my: 'center', at: 'center' }); 
    ID = ui.draggable.attr("id").replace('Stage_',''); 
    console.log('this is the id name: ' + ID); 
    sym.$('wrong').animate({'top': 23},1000); 
    // replace wrong image with goodJob image since it is correct 
    sym.$('wrong').attr('src',"images/goodJob.png");  
    if (music.paused) { 
     sym.$("correctFX")[0].pause(); 
    } else { 
     sym.$("correctFX")[0].currentTime = 0; 
     sym.$("correctFX")[0].play(); 
    } 
    // since the droppable area is independant of the bg which move 
    // I implemented a substitute icon in the fixed area 
    sym.$(""+ID+"Copy").css({'opacity':1.0}); // show icon on the bar 
    sym.$(""+ID+"").css({'opacity': 0});  // hide the draggable icon 
    // count the number of correct to show feedback 
    k++; 
    if(k==7){ 
     sym.$('complete').animate({"left":0},700); 
     sym.$("completionFX")[0].play(); 
     sym.$('wrong').animate({'top':450},1000); 
    } 
} // end dropevent function 

Answer 1

Wenn Sie nur ein Problem von Index 2 Ihres Arrays auftreten, die MANAGER enthält, würde dies den folgenden Code erstellen:

sym.$('MANAGER').addClass('drag2'); 

Wenn Sie irgendwelche anderen Klassen, die drag2 sind, diese würde einen Konflikt in der Auswahl verursachen. Überprüfen Sie den Code für alle Klassen oder IDs, die andere passen könnte als