15 Replies Latest reply on Jul 7, 2015 2:46 PM by resdesign

    Interactive SVG draggable issue (jQueryUI)

    alexk77116974

      Hi guys,

       

      I have a problem with my interactive SVG project. Basically I made the SVG interactive with EdgeCommons.js library, I think most of you know the library. The SVG works fine - its fully interactive, I am able to change colors, hover over some parts etc. Now the next step would be to make it draggable. I have used the latest jQueryUI library and followed the documentation. It works with a plain SVG but not with my interactive SVG.

       

      I have put the small project file onto my dropbox in case you want to take a look  => Zip File or uncompressed

       

       

      I hope you guys can help me out.

       

       

      cheers,

      Alex

        • 1. Re: Interactive SVG draggable issue (jQueryUI)
          didiermazier Adobe Community Professional

          Have a look at Greensock. This is an interesting alternative to JQuery for drag and drop… And it is free too.

          • 2. Re: Interactive SVG draggable issue (jQueryUI)
            alexk77116974 Level 1

            thank you for your reply I tried greensock but it doesn't work as well. Meanwhile I wrote to Simon Widjaja from EdgeDocks/EdgeCommon and he told me that its kinda tricky, because it looks like that the SVG document ("SouthAmerica") does not forward the click and mouseDown event to the DOM element. He recommended to catch the SVG event and forward it manually to the DOM element.

             

            I tried everything but I can't get it to work im really disappointed. Also we have to submit our student project by beginning of next week and time is running out ...

            • 3. Re: Interactive SVG draggable issue (jQueryUI)
              didiermazier Adobe Community Professional

              Problem solved. I used and older JQ version and a distinct function (yepnope)… You will be able to submit your project…

              File here on my cloud…Adobe Creative Cloud

              If it works please mark the answer as correct to help others to find better on the forum

              • 4. Re: Interactive SVG draggable issue (jQueryUI)
                alexk77116974 Level 1

                thank you so much. its not exactly what I want but It works quite good. Would it be possible to make the SVG draggable by, lets say, clicking inside the ring, maybe the dark area inside?

                 

                One thing I found out in your solution is that the object is not draggable in the corners, why is that? There is nothing behind it which could affect the dragging.

                And can you please describe what " start: function(e){}, drag: function(e,ui){} "   stands for?

                • 5. Re: Interactive SVG draggable issue (jQueryUI)
                  didiermazier Adobe Community Professional

                  Hi,

                  Glad you could make it.

                  First of all I organized a little your file order, because it was not clear if SouthAmerica was a symbol or not.

                  Now we have :

                  Stage>SouthAmerica (symbol)>mexico.svg(not a symbol but could be inside a specific one)

                  Second with this code :

                       yepnope(

                       {

                       nope:[

                       'js/jquery-ui-1.10.4.custom.min.js'

                       ],

                       complete: init

                       });

                  We ask to load the lib. Then…

                       function init(){

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

                       start: function(e){},

                       drag: function(e,ui){},

                  We set up the drag function. Inside the {} you can set up specific parameters like displacement axis or rythm

                  You also can add a containment in order not to restrain the dragging the parent container

                       containment: "parent",

                  You could add also droppable zones, alerts and so on…

                  And the closings…

                       });

                       }

                       ;

                  You may find interesting to read the UI API related to the drag thing : https://api.jqueryui.com/draggable/

                   

                  Best

                  Didier

                  PS : Do not forget to mark the answer as correct to help other to find faster. Thx

                  • 6. Re: Interactive SVG draggable issue (jQueryUI)
                    resdesign Adobe Community Professional & MVP

                    btw you can use script loading panel instead of yepnope and it works just fine.

                    • 7. Re: Interactive SVG draggable issue (jQueryUI)
                      alexk77116974 Level 1

                      but is it possible to make the SouthAmerica div draggable by clicking inside the ring with its contour/border or by clicking inside the blue area? At the moment its "only" draggable by clicking outside the ring...

                      • 8. Re: Interactive SVG draggable issue (jQueryUI)
                        didiermazier Adobe Community Professional

                        You are right. I made a copy of a file I made a long time ago… And not being an expert when something works…

                         

                        And also I noticed that in fact I did not solve totally the issue : it only works because the SouthAmerica symbole is made larger. If you click in the mexico.svg, it activate the svg interactivity and you cannot drag the whole thing…

                        It seems that the embedded divs are in someway one on the top of the other, the last one being the top most.

                        • 9. Re: Interactive SVG draggable issue (jQueryUI)
                          didiermazier Adobe Community Professional

                          In fact I did not solve totally the issue : it only works because the SouthAmerica symbole is made larger. If you click in the mexico.svg, it activate the svg interactivity and you cannot drag the whole thing…

                          It seems that the embedded divs are in someway one on the top of an other, the last one being the top most.

                          And there is still a conflict between the on click instructions on the svg and the dragthing.

                          I do not know if there is a solution… I'll try but surely we will need more skills than mine…

                          • 10. Re: Interactive SVG draggable issue (jQueryUI)
                            alexk77116974 Level 1

                            i think I have to give up - seems to be impossible to do this

                            • 11. Re: Interactive SVG draggable issue (jQueryUI)
                              alexk77116974 Level 1

                              didier is right - loading via script panel does not work - only way it works is by yepnope

                              • 12. Re: Interactive SVG draggable issue (jQueryUI)
                                Lucir Level 1

                                Hi, alexk77116974,

                                Have you consider using Snap.SVG.js in place of EdgeCommons.js? I tried Snap and it seems to work much better than EdgeCommons for svg images with Edge Animate. You can import the Snap library into the scripts portion of the Library and you can work with existing svg images or create new ones on stage at runtime. You can then manipulate the different elements of the image, make them interactive, change and animate the attributes(like color, scale, position, fonts if they are texts elements, etc.). There is also a drag function. Snap works like Raphael.js created by the same person, Dmitry Baranovskiy. You do need to open the Ai svg image using a code editor like Brackets or Dreamwaver to see the ids of the elements like <path> <circle> etc.

                                I imported the svg image into EA's image library and prepared a div(I named imageHolder) to hold the image; then in creationComplete I used the code:

                                var imHolder =  = sym.$("imageHolder");

                                imHolder.load("images/nameOfImage.svg", function(){//this function holds all the commands ie code you want to execute on your image including the event handlers for interactivity etc

                                     var snapCanvas = Snap("svg#nameOfImage")//This function makes the svg image the drawing canvas for Snap});


                                The load() and Snap() functions are in the API of Snap.svg.js


                                 



                                 

                                • 13. Re: Interactive SVG draggable issue (jQueryUI)
                                  didiermazier Adobe Community Professional

                                  Sounds interesting. I once tried snap and raphael but was not convinced. I will check if it helps on this particular issue … Thanks for sharing

                                  • 14. Re: Interactive SVG draggable issue (jQueryUI)
                                    Lucir Level 1

                                    Yes, didiermazier, check it out. It's open source, but if enough people pay attention to it, Adobe might invest more time on it.

                                    • 15. Re: Interactive SVG draggable issue (jQueryUI)
                                      resdesign Adobe Community Professional & MVP

                                      ywx012

                                      I tried Snap and could not make it work very well in Animate. If you have a sample to post it would help others.