11 Replies Latest reply on Jun 8, 2015 12:21 PM by owanomono

    Make image draggable

    owanomono

      Hi all,

       

      how do I do make an ordinary image draggable? If I have to use JQuery, please explain how that integrates with EA since I know zilch about it. Also, is there some sort of pre made "action" that can be applied to the image to make it draggable?

       

      Regards

       

      Johan

        • 1. Re: Make image draggable
          resdesign Adobe Community Professional & MVP

          hi there. Check out my example here. old version but works with new version too.

          ! simple draggable.zip - Box

          YEs you need jquery - load with the script panel. THen load jquery-ui.

          • 2. Re: Make image draggable
            nancied Level 1

            Yeah you need jQuery.

            Try this tutorial   How to Do an easy Drag and Drop in Edge Animate - YouTube

            • 3. Re: Make image draggable
              owanomono Level 1

              Hi,

               

              thanks for your answers, it helped a lot to get me going in the right direction. One thing is strange, though. In Safari, when click and drag an image it jumps to the edge of the stage. On my IPhone 5 the images disappear completely when touched. Kinda irritating. Any ideas as to why?

               

              Also, I use up to 30 images on one page (thumbnail size) and had to use this code to make each image draggable:

               

              sym.$ ("B2_110").draggable();

              sym.$ ("B2_210").draggable();

              sym.$ ("B2_37").draggable();

               

              ...and so on for each image.

               

              I tried this to make the code more effective:

               

              sym.$ ("B2_110","B2_210","B2_37" etc... )

               

              but this only makes the first image draggable.This code works in your examples, though. Go figure.

               

              Regards

               

              Johan

              • 4. Re: Make image draggable
                resdesign Adobe Community Professional & MVP

                If you have any left or top in the timeline, remove then. See my tips and trick here and look at tip # 3:

                What's Going on With My Symbols! l EdgeHero:

                • 5. Re: Make image draggable
                  owanomono Level 1

                  Hi,

                   

                  I don't animate anything on the timeline. It's completely empty of any property. I also checked the origins on all my objects and they are all on center. However, there seems to be something strange going on with the centers. If you drag an image around in the screen you see that it changes position relative to the mouse cursor. If you move the cursor to the upper left corner of the browser the image sits under the cursor.

                  Found this post about cursor problems:

                   

                  Cursor Problems in Adobe Edge

                   

                  I'm not a coder but tried to insert the propesed code fix in Stage:

                   

                  // compensate for CSS centering

                  var centeredOffset = $("#Stage").offset().left;

                   

                   

                  But there is no change to my problem. Maybe I've done something wrong with the above code?

                   

                   

                  I have checked Safari, Firefox and Chrome for OSX and the problem is the same.

                  Please check what I mean here: www.bigtime.se/boarded/board.html (it's for a sort of game). Images under "Board 2" are draggable.

                   

                  I use these JQuery files loaded in this order:

                   

                  jquery-2.0.3.min.js

                  jquery-ui-1.10.3.custom.min.js

                  jquery.ui.touch-punch.min.js

                   

                  On the Stage I have inserted this code:

                   

                  sym.$ ("B2_110").draggable();

                  sym.$ ("B2_210").draggable();

                  sym.$ ("B2_37").draggable();

                  sym.$ ("B2_42").draggable();

                  sym.$ ("B2_52").draggable();

                  sym.$ ("B2_62").draggable();

                  sym.$ ("B2_72").draggable();

                  sym.$ ("B2_82").draggable();

                  sym.$ ("B2_92").draggable();

                  sym.$ ("B2_102").draggable();

                  sym.$ ("B2_112").draggable();

                  sym.$ ("B2_122").draggable();

                  sym.$ ("B2_132").draggable();

                  sym.$ ("B2_142").draggable();

                  sym.$ ("B2_152").draggable();

                  sym.$ ("B2_162").draggable();

                  sym.$ ("B2_172").draggable();

                  sym.$ ("B2_182").draggable();

                  sym.$ ("B2_192").draggable();

                  sym.$ ("B2_202").draggable();

                  sym.$ ("B2_212").draggable();

                  sym.$ ("B2_222").draggable();

                  sym.$ ("B2_232").draggable();

                  sym.$ ("B2_242").draggable();

                  sym.$ ("B2_252").draggable();

                  sym.$ ("B2_262").draggable();

                  sym.$ ("B2_272").draggable();

                  sym.$ ("B2_282").draggable();

                  sym.$ ("B2_292").draggable();

                  sym.$ ("B2_302").draggable();

                  sym.$ ("B2_312").draggable();

                  sym.$ ("B2_322").draggable();

                  sym.$ ("B2_332").draggable();

                  sym.$ ("B2_342").draggable();

                  sym.$ ("B2_352").draggable();

                  sym.$ ("B2_362").draggable();

                   

                   

                  I just discovered that the problem has to do with "Responsive scaling"! If I turn it off everything works perfectly. But then it will not work so well on mobile devices which makes it kinda useless.

                   

                   

                  Regards

                  Johan

                  • 6. Re: Make image draggable
                    resdesign Adobe Community Professional & MVP

                    Indeed it does not work with responsive scaling. i think there is a work around but I can't remember what it is. I will try and find it.

                    • 7. Re: Make image draggable
                      didiermazier Adobe Community Professional

                      Check Greensock… GreenSock | Draggable

                      These libraries rock and they rare rather simple to use.

                       

                      • 8. Re: Make image draggable
                        resdesign Adobe Community Professional & MVP

                        I agree! GreenSock is great. I made a tutorial about it about the spinning drag.

                        • 10. Re: Make image draggable
                          didiermazier Adobe Community Professional

                          I will. Thanks!

                          • 11. Re: Make image draggable
                            owanomono Level 1

                            Hi,

                             

                            thanks all for great input. Will check out Greensock. I now close this thread as solved.

                             

                            Johan