One of my revert objects for drag n drop with function is half way wrong in Adobe Edge Animate

Question

I applied the answer here for revert on this thread (Adding a function to jQuery draggable revert "event") but I still have a problem. When placed in the wrong drappable, the manager icon for some reason instead of reverting to its place, just hides and shows the correct icon where it would if it did not revert and was correct. The feedback is wrong which is which is what should be. All the others do revert and show feedback as expected if I place them in the wrong droppable. This is strange that one would act differently. All the correct ones do what they are supposed to do. The setup: I have a long background with icons which is movable with keydown events. On the top I have a (fixed) bar with the droppables and hidden icons that will appear on correct draggable while the actual draggables will hide. This is because otherwise the draggables would move with the background since if is a different div than the bar where the droppable are.
Hope this makes sense.

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

You never selected an answer to your other question: http://stackoverflow.com/questions/36203393/how-to-disable-a-draggable-even-if-dropped-into-wrong-droppable/36206380#comment60050830_36206380 - did this work for you? Can you update the jsfiddle example to represent this new issue? — Twisty, Mar 28 '16 at 17:45
No I cannot make it work for some reason. I guess this has to do with the fact that Edge Animate does things a little different. I am not giving up though. This new one is a little frustrating too. Here is a link to it: http://mjpagedesign.com/fundraiser/ When you start, you need to get the top screen down with the arrow. Then you can try manager as false and see what happens. Then try to make some other answer wrong and you will see that they work OK. Strange. I usually have no problem with these. :( — Edgedudette, Mar 28 '16 at 20:20
Not familiar with Edge, but not going to let that deter me either. Will take a look. — Twisty, Mar 28 '16 at 20:40
Found a quirk, if you drag a vehicle or tire, it creates a very odd drag item. I dragged the manager head from the right to the "Choose Manager" box. I got no action. When I drag the graph icon to the same box, I get the "Oops" dialog box. — Twisty, Mar 28 '16 at 20:43
Another quirk, if you hold down the Right arrow, you'll just keep scrolling infinitely. And you can't come back. Left does this too but returns to beginning at some point and then does not accept further input. — Twisty, Mar 28 '16 at 20:47
I updated the file. Should have corrected some quirk. Do you have any idea why the manager does not work while the others do? — Edgedudette, Mar 29 '16 at 12:16
Do you think you could decipher this? https://app.box.com/s/2nqtlt4t3n6uapsoanhwfz47i85nbz3p — Edgedudette, Mar 29 '16 at 16:20
I can. One thing I notice now, that I must have glossed over, you have: `sym.$('wrong').attr('src',"images/wrongSpot.png");`, this is not a proper selector. Did you mean `sym.$('.wrong').attr('src',"images/wrongSpot.png");` to select the Class? — Twisty, Mar 29 '16 at 16:41
No this is right. I have a seed image on the stage called 'wrong' - that's the id. I swap this image with the other 6 or 7 images as needed depending on what is happening and what feedback I want. We can switch to chat if you want and if it is more convenient. — Edgedudette, Mar 29 '16 at 17:30
We can do chat - I understand now, it's just not the convention one is used to for JQuery selectors. — Twisty, Mar 29 '16 at 17:39
Hum! I cannot chat because not enough points. :( Yes we use sym.$('elementName') for elements and sym.getSymbol('elementName') for symbols. — Edgedudette, Mar 29 '16 at 17:52
By the way the icons are in order in the action file I gave you. I changed their position in the last edit and added some code for some other actions. updated the file on my site. But this is not touching the manager problem. Frustration. Does not make sense that the 3rd element in the array messes up and not the rest. — Edgedudette, Mar 29 '16 at 17:57
is there a `MANAGER` id ? would `sym.$('MANAGER').addClass('drag2');` work (like it should in the for loop)? — Twisty, Mar 29 '16 at 18:49
You're a genius! You did it. I called my second set of draggables (the objects that do not belong in the circles) drag2 - so I had a dupplcate class. After giving them a different class name, it all works! THANK YOU!!! — Edgedudette, Mar 29 '16 at 20:35
How can I give you credit for this? Do you want to post your answer? — Edgedudette, Mar 29 '16 at 20:36

score 0 · Accepted Answer · answered Mar 29 '16 at 21:47

0

If you only encounter a problem from Index 2 of your array, that contains MANAGER, this would create the following code:

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

If you have any other classes, that are drag2, this would cause a conflict in the selection. Check your code for any classes or IDs that might match other than

answered Mar 29 '16 at 21:47

Twisty

30,304
2
26
45

The for loop gives MANAGER the class drag2 which was in conflict with another loop that was used later in the code using drag2 as well . Great insight. Thanks. – Edgedudette Mar 29 '16 at 22:56

One of my revert objects for drag n drop with function is half way wrong in Adobe Edge Animate

1 Answers1