20 Replies Latest reply on Dec 30, 2015 9:13 AM by JKocon3DArt

    Help with jQuery and Edge Animate

    TimTeelin

      Hello there. I am new to Adobe Edge Animate and have had a lot of trouble loading my jQuery into the project for drag and drop features. Do you have any recommendations, suggestions, tutoring? I am in Upstate New York.

      Many thanks!

        • 1. Re: Help with jQuery and Edge Animate
          resdesign Adobe Community Professional & MVP

          Please indicate your version of Animate as stipulated in the info for posting on is forum.

          you need to load in order in the script loading panel:

          jQuery.js

          jQuery-ui.js

          touch-punch.js

           

          Check out documentation for draggable and droppable on the jQuery-ui site.

          Check out my tutorial and sample file on edgeheroo.com

          • 2. Re: Re: Help with jQuery and Edge Animate
            TimTeelin Level 1

            Thank you so much for your quick response! I really appreciate it. I am using Adobe Edge Animate CC (2014). When watching tutorials, some on Lynda.com, some on Youtube, they always pointed to the jquery-ui-1.10.4.min.js file, as a matter of fact, several of the tutorials say to only import this one file from the download- which is hard at this point because of updates. Right now the site is up to jquery-ui-1.11.2, but the file inside is not named jquery-ui-1.11.2.

            I found your site at edgehero.com, fantastic resource.

             

            A couple of questions:

            When I downloaded the jQuery folder I found:

            jQuery.js in a separate folder

            jQuery-ui.js

            and I downloaded the touch-punch.js from another site.

             

            I have copied these files to the project folder, and then added them to the project using the script upload in the library. I added them in the order you indicated above: jQuery.js and then jQuery-ui.js and last touch-punch.js-

            I added the sym.$("nameofsymbol").draggable();

            but no dragging is happening.

             

            I did try a test to see if the jQuery was loading by adding:

             

            if (jQuery){
            alert("loaded");

            to the stage: Creation Complete, but that did not load when testing the page.

             

            I downloaded your sample file, so I will see if I can work from that project and duplicate it in my own. I wasn't using containers at this point, just trying to get one object to drag first, and then move on from there.

            Many thanks for your help!

            • 3. Re: Help with jQuery and Edge Animate
              resdesign Adobe Community Professional & MVP

              I have some other files I can point you to but I am currently away from my computer. I will be able to post other samples of you still need them in a couple of days.Note that my example was made in an earlier version but it still should work.

               

              Make sure that the files are in the right order in the script loading panel - jquery has to be first since jquery-ui is dependent on it and touch-punch is dependent on the 2 others.

               

               

               

               

              Start simple with just .draggable(); and make sure that it works.

               

              Then you can add other functionalities.

               

              On Wed, Jan 7, 2015 at 1:12 PM, TimTeelin <forums_noreply@adobe.com>

              • 4. Re: Help with jQuery and Edge Animate
                TimTeelin Level 1

                Thanks so much for your help. I look forward to additional resources. Your project worked great when I tested it. I don't know if I have a syntax error, or if I am placing my code in the wrong location, but I don't give up easy. I will continue to work on it- thanks again for your help. If you have a simple drag and drop with two simple symbols, I would love to see it.

                Lucky to have you as a resource.

                • 5. Re: Help with jQuery and Edge Animate
                  DylanGraft Level 1

                  I'll see if I can help at all. First, you only need jQuery-ui.js and the touchpunch.js scripts in your script library. You don't need to reference this directly in creation complete.


                  On each object that you wan't to make draggable add this to "mouseover" action. If you are targeting mobile platforms, which I assume you are considering the use of touchpunch, you will need to duplicate your "mouseover" actions and paste them into a "touchstart" action.

                   

                  sym.$("yourDraggableName").draggable({opacity: 0.5, revert: "invalid"});

                   

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

                    accept: sym.$("yourDraggableName"),

                    drop: function(){

                    sym.$("YourDraggableName").animate({"left": "XXpx", "top": "XXpx"}, "fast");

                    }                                                             

                  });

                   

                  ^^ The top line will control the appearance of the object while you're dragging it and make it revert to the original position if it's not placed on the droppable element.

                   

                  The next section links your draggable object to your droppable element. The .animate({"left": "", "top": ""}), "fast"); section should be filled in with the X and Y position of the droppable element. This will control how fast or slow the object snaps into its droppable location once you place the draggable object within the bounds.

                   

                  Hopefully this helps. Let me know if you are successful.

                  • 6. Re: Help with jQuery and Edge Animate
                    TimTeelin Level 1

                    Thank you again for all of your help with this.I gave it another try with the directions above, but I am having the same errors.

                    I broke it down to it's most rudimentary elements: a symbol on the stage, the jQuery-ui-js file added, and sym.$("test").draggable(); added to the symbol's action panel. I have uploaded the folder to a website- if you have a moment, perhaps you could take a look and find the error I am making?

                    Many thanks!

                    http://mrteelin.com/SimpleTest/

                    • 7. Re: Help with jQuery and Edge Animate
                      resdesign Adobe Community Professional & MVP

                      Back from vacation! Icon now look at your file. Could you post a link to it?

                      • 8. Re: Help with jQuery and Edge Animate
                        TimTeelin Level 1

                        http://mrteelin.com/SimpleTest/

                        Thanks and welcome back!

                         

                        Sent from my iPhone

                        • 9. Re: Help with jQuery and Edge Animate
                          resdesign Adobe Community Professional & MVP

                          any way you could zip this and post the link?

                          • 10. Re: Help with jQuery and Edge Animate
                            TimTeelin Level 1

                            Absolutely, and again many thanks for looking. A simple square box as a symbol and the jQuery added.

                            http://mrteelin.com/SimpleTest.zip

                            I hope it is something simple-

                            Very nice of you to look-

                            • 11. Re: Help with jQuery and Edge Animate
                              resdesign Adobe Community Professional & MVP

                              You do not need to use a mouse event to use draggable. jQueryUI draggable does it for you.

                              See the file corrected and commented here:

                              Dropbox - SimpleTest.zip

                              • 12. Re: Help with jQuery and Edge Animate
                                resdesign Adobe Community Professional & MVP

                                @ Dylan

                                 

                                I do not agree with you. jquery-UI depends on jquery and since Animate does not include jquery any more, you have to load it with script loading.

                                • 13. Re: Help with jQuery and Edge Animate
                                  DylanGraft Level 1

                                  @ redesign

                                   

                                  True, I should have pointed out that I'm still running Animate CC (2014). You are correct that you will need to load it with the latest release. I assumed OP was using the old version as well, considering he states that he is using that version in his second post.

                                  • 14. Re: Help with jQuery and Edge Animate
                                    resdesign Adobe Community Professional & MVP

                                    Oops. I sent him a sample with the latest version. I guess I will have to make another one.

                                    • 15. Re: Help with jQuery and Edge Animate
                                      TimTeelin Level 1

                                      Thank you, thank you, thank you for all of your help so far. It took me a while to figure out what the error was that I was having. Unfortunately, I know the error but not the cause. The file you sent from the dropbox did not work, but I had a few other samples, one from your website, and one from Lynda.com. I assumed the jQuery library was not loading properly-

                                      I went back and forth to the different Animate project folders, and by comparing those that worked with those that didn't, I was able to copy the jQuery libraries and place them in the correct location- until I got it right. So, I was able to continue with the Draggable feature, but I am not sure why the files were not adding to the right folders- I will have to continue to practice so I don't have to duplicate a folder and project to start out right.

                                      The files I moved were:

                                      In the JS folder:

                                      JS folder.JPG

                                      and the Edge Includes folder:

                                      edgeincludes.JPG

                                      For some reason, the jqueery-2.0.3.min.js needed to be there as well, and I think this might have been the error.

                                      Anyway...

                                       

                                      So I have the Draggable working, here is a sample:

                                      http://mrteelin.com/Superhero2/Superhero2.html

                                       

                                      Before I moved on to the drop feature, I wanted to see if the drag would work on an iPad. I am going to be creating personalized refrigerator magnets for students for the iPad, so just draggable to start will be helpful. I have added the touch-punch and then added the draggable code to the starttouch tab, but it isn't working.

                                      Here is a .zip if anyone is brave enough to keep helping!

                                      http://mrteelin.com/Superhero.zip

                                      Thanks again!

                                      • 16. Re: Help with jQuery and Edge Animate
                                        resdesign Adobe Community Professional & MVP

                                        the most important thing is to load the plugins in the right order as I mentioned earlier. Touch-punch should be the last one. You also have to add your draggable and droppable in the touch code window of the stage.

                                        I will look at your files when I get home in a couple of hours.

                                         

                                        ps: you can drag and drop the plugins in the panel so they are in the right order.

                                        • 17. Re: Help with jQuery and Edge Animate
                                          TimTeelin Level 1

                                          That was the ticket! Works on an iPad. I am in business-

                                          Thanks a million for your help- now I am ready to have some fun!

                                          • 18. Re: Help with jQuery and Edge Animate
                                            resdesign Adobe Community Professional & MVP

                                            If you can mark this as correct, it will help others. This problem is very common.

                                            • 19. Re: Help with jQuery and Edge Animate
                                              -Jaydude- Level 1

                                              Ehm - what was the exact answer?

                                              • 20. Re: Help with jQuery and Edge Animate
                                                JKocon3DArt

                                                In EdgeAnimate CC 2015:

                                                 

                                                1) Place  'jquery.js' and 'jquery-ui.js' in a folder named 'js' in your edge animate project folder

                                                2) In Edge Animate, Add jquery scripts to composition using Library>Scripts>add JS file from disk - add jquery.js then jquery-ui.js, in that order.

                                                3) Open the code window for the Stage and under 'creation complete' add the following:

                                                                    yepnope({nope:[ 'js/jquery.js' ], complete: init});

                                                                    yepnope({nope:[ 'js/jquery-ui.js' ], complete: init});

                                                   

                                                4) Add the following code to Stage 'CreationComplete' to make 'mySymbol' draggable:

                                                          function init(){

                                                          sym.$('mySymbol').draggable();

                                                          }