4 Replies Latest reply on Jul 3, 2015 6:16 PM by kwdelre

    Simple counting and conditional statement with drag and drop

    kwdelre Level 1

      I'm getting frustrated with this and need some help. I have made a drag and drop interactive comp that is based off of the partially working tutorials form several people. Took me two days just to iron out the simple steps they do in Edge, yet don't work the same as mine. I could go on and on about how these tutorials wasted 2 days of my time, but I digress.

       

      I have the comp working and doing everything it should. There is an animation with additional info that is set to play once all 5 draggable and droppable elements have reached their destination. Here is what the droppable code looks like:

       

      (mouseover)


      sym.$("Step3Draggable").draggable({

          opacity: 0.35, revert: "invalid"

      });

       

      sym.$("Step3Dest").droppable({

          accept: sym.$("Step3Draggable"),

          drop: function() {

              sym.getSymbol("Step3Draggable").play();

              sym.$("Step3Draggable").animate({"left": "50%", "top": "38.8%"});

              Dropped3 = "true";

          }

      });


      if(Dropped1 == "true" && Dropped2 == "true" && Dropped3 == "true" && Dropped4 == "true" && Dropped5 == "true"){

          sym.$("CompletedSymbol").show();

          sym.getSymbol("CompletedSymbol").play();

          Dropped1 = "false";

          Dropped2 = "false";

          Dropped3 = "false";

          Dropped4 = "false";

          Dropped5 = "false";

      }

       

       

      Then, a conditional if statement checks to see if Dropped3, etc have been set to true and if so, it plays that final animation. Problem is that it MUST have that mouseover trigger AGAIN, after the last element has been dropped. Not a big deal on desktops because the user is likely moving the mouse a hair at least, but on tablets, It's worthless.

       

      Now if you know code, you know that this is not a very good way to do this, and quite cumbersome.


      I started off wanting to do this...

       

      On creationComplete

      var Dropped = 0;

      if(Dropped == 5){ sym.getSymbol("CompletedSymbol").play(); }

       

      On the Symbol

      (mouseover)


      sym.$("Step3Draggable").draggable({

          opacity: 0.35, revert: "invalid"

      });


      sym.$("Step3Dest").droppable({

          accept: sym.$("Step3Draggable"),

          drop: function() {

              sym.getSymbol("Step3Draggable").play();

              sym.$("Step3Draggable").animate({"left": "50%", "top": "38.8%"});

              Dropped ++;

          }

      });


      This is the way I would prefer to do it, yet I get no results. Even more confusing yet, placing Dropped ++; as you see it right above causes the symbol to stay at .35 opacity!!!! What am I doing wrong??? Sure wish Animate would add some type of comp counting trigger.


      Any help is appreciated.


        • 1. Re: Simple counting and conditional statement with drag and drop
          resdesign Adobe Community Professional & MVP

          Look at my sample in my tutorial at edgehero.com and see if that would help.

          Drag and Drop in Edge Animate l EdgeHero

           

          See it working here:

          Drag and Drop Example for Edgehero.com

          • 2. Re: Simple counting and conditional statement with drag and drop
            kwdelre Level 1

            Thank you resdesign. I have actually tried to use that tutorial a few days ago but got stuck in a few places. These worked in a different tutorial attempt, but with it's own deficiencies. I'm trying to merge the two for everything to work.

             

            With your help I am able to get my interactive to work, but with the following issues:

             

            1) Playing the animation of the "dropped" symbol

            2) No longer my smooth easy ease animation into "drop" area.

             

            1) Here I have a short animation that should play as the dragged element

            This is the code I have tried among many other syntax attempts

             

            k=0;

             

            function handleDropEvent(event, ui){

                 ui.draggable.draggable( 'disable' );

                $(this).droppable( 'disable' );

                ui.draggable.position( { of: $(this), my: 'center', at: 'center' } );

                ui.draggable.draggable( 'option', 'revert', false );

                sym.getSymbol('Step1Draggable').play(); // works but will get triggered if any of the draggables are used.

                 sym.getSymbol(draggableEl[k]).play(); // sort of works, but only if dragged in the correct order

                k++;

             

                if (k==5){

                    sym.$('GrayedOut').fadeOut(500);

                    sym.$('CompletedSymbol').fadeIn(500);

                    sym.$('Step_Arrow_Sign2').fadeIn(1000);

                    sym.getSymbol('CompletedSymbol').play();

            }

            I won't list out all of the different ways I tried it, but clearly I don't have the javascript experience. How do I call this animation based on the selected element? I also tried sym.getSymbol(this).play() & $(this).play(); with no luck. I know this must be simple......


            2) Do you happen to know how to smooth out the animation? Specifically the animation that brings the draggable to its final resting spot. I know I can find it in the jQuery ui documentation, but what I have tried does not work, and I am wondering if I am placing it in the wrong position in the "handleDropEvent" function.


            Thank you for your help!

            • 3. Re: Simple counting and conditional statement with drag and drop
              kwdelre Level 1

              When embedding a published .OAM in Muse, the animation page is included via an iframe. The problem I am having is that even though I am using touch-punch, when on an iPad the dragging vertical causes the page to scroll, specifically the page that contains this iframe. I assume this is because touch-punch is acting on the html page INSIDE the iframe. I'm pretty bad with javascript so I apologize if this is a simple fix.

               

              Does anyone know how to get around this? It would be very appreciated!

               

              - Will

              • 4. Re: Simple counting and conditional statement with drag and drop
                kwdelre Level 1

                In case anyone else runs into this 'scrolling while dragging,' here is what I found out.

                 

                I set up a desktop and tablet version of the same page in Muse and placed the .OAM edge file on both. Turns out that the way Muse operates, the desktop version doesn't work correct on a tablet (iPad), but the "tablet" version did work correct. So in order to embed an Edge animation that contains drag and drop capability, you must publish it from Muse as a tablet page. Otherwise, as you click and drag on a tablet viewing the desktop version, the page will scroll vertically and not allow your vertical position to change relative to the rest of the page elements. I'm sure there is a javascript fix for this, but for those that are using Edge and Muse in a similar way, maybe this will help your troubleshooting. Looks like I have another tablet page to add...