14 Replies Latest reply: Oct 8, 2014 10:10 AM by bustedvillain RSS

    drag-and-drop utility for Edge Animate(only x-axis)

    YOSHIOKA Ume Community Member

      KONBANWA from Japan.

       

      I create the drag-and-drop utility for Edge Animate(only x-axis ). here.

      http://ciruelo.jp/js/edge/dd/DandD.html

       

      If you want to test.

       

      1. copy all of code on DandD.html-stage-creationComplete to your edge file-stage-creationComplete.

      2. use "draggableX()" method, like that.

      //drag element "rect"
      sym.$("rect").draggableX();
      
      //drag element "dog", limited range
      sym.$("dog").draggableX({minX:100,maxX:300});
      
      //drag nested element "seekBarPointer", limited range
      sym.$("seekBarPointer").draggableX({minX:0,maxX:160});
      
      //drag element "pic" class, and scroll target element $("carouselBase"), click to rotate.
      $(".pic").draggableX({
           target:sym.$("carouselBase"),
           onclick:function(e){
             $(e.target).css({
                  "-moz-transform":"rotate(-45deg)",
                "-webkit-transform":"rotate(-45deg)",
                "-o-transform":"rotate(-45deg)",
                "-ms-transform":"rotate(-45deg)"
             });
           }
      });
       

       

      Maybe, moving on iPad

       

      BTW, I want such a function on Edge Animate.

      If I can be, without having to write a script.

      Only use a panel like "Drag and Drop panel" ,  "Carousele panel" etc..

       

      Thanks in advance. adobe team.

       

      Ume.

        • 1. Re: drag-and-drop utility for Edge Animate(only x-axis)
          William Patin Community Member

          Thank you for this awesome ressource!

           

          You did such a great work - much appreciated.

           

          Cheers,

           

          Will

          • 3. Re: drag-and-drop utility for Edge Animate(only x-axis)
            sarhunt Employee Hosts

            Very cool! Thanks for sharing!

             

            Sarah

            • 4. Re: drag-and-drop utility for Edge Animate(only x-axis)
              PixelGirl

              This is fantastic, and almost exactly what I was looking for.

               

              In the case of the carousel, suppose you wanted to have it loop in either direction? For example, when you get to the min or max X position, it would seemlessly start over?

               

              I'm trying to do a 360 panorama scene which would be great with this code!

              • 5. Re: drag-and-drop utility for Edge Animate(only x-axis)
                YOSHIOKA Ume Community Member

                Hi PixelGirl. Sorry for late reply.

                 

                Well... If you wanto to loop pics. How is that like this?

                Use drag-event and reset base&pics pos.

                 

                http://ciruelo.jp/js/edge/loop/loop.html

                //variables
                var PADDING = 10;
                var PIC_WIDTH = 100;
                var PAD_AND_WIDTH = PADDING+PIC_WIDTH;
                var TOP_PIC_X = -(PIC_WIDTH);
                
                //set carousel base div
                var base = sym.$("carouselBase");
                var BASE_X = parseInt(base.css("left"));
                
                //set picList (pic01-pic08)
                var picList = [];
                $.each($(".pic"),function(i,elm){
                  picList.push(elm);
                });
                var topIndex = picList.length-1;
                
                //func for relocate pics
                function RelocatePics(){
                  var i = 0;
                  while(i<picList.length){
                    $(picList[topIndex]).css("left",TOP_PIC_X+(PADDING+PIC_WIDTH)*i+"px");
                    i++;
                    topIndex = ++topIndex%picList.length;
                  }
                }
                RelocatePics();
                
                //set draggableX to $(".pic")
                $(".pic").draggableX({
                  target:base,
                  ondrag:function(e){
                    var gap = BASE_X - parseInt(base.css("left"));
                    sym.$("log").text("gap:" + gap);
                    //check loop pos
                    if(gap>PAD_AND_WIDTH || gap<-PAD_AND_WIDTH){
                      //relocate pics
                      topIndex +=(gap>0)?1:-1;
                      topIndex = (topIndex+picList.length)%picList.length;
                      RelocatePics();
                      //reset base pos
                      base.css("left",BASE_X+"px");
                      //reset data for draggable
                      var ddData = e.data;
                      ddData.oldPageX = ddData.lastX = e.pageX;
                        ddData.oldPageY = ddData.lastY = e.pageY;
                        ddData.gapx = e.pageX-ddData.target.getLeftPx();
                    }
                  }
                });
                

                 

                BTW. I think that if you want to carousel func, It's easier to use the other library.

                (serch "jquery carousel" !)

                 

                HTH. Thanks.

                Ume.

                • 6. Re: drag-and-drop utility for Edge Animate(only x-axis)
                  PixelGirl Community Member

                  Ume,

                   

                  Thank you so much for this code! I am going to try it out in my project right now

                  • 7. Re: drag-and-drop utility for Edge Animate(only x-axis)
                    raoultomada

                    Dear Ume,

                    I've recently found your example of the drag_and_drop utility for edge on the Adobe forums.

                    I've learned a lot of it but I have two questions left and would love you to give me an answer. I would like to use your utility as a vertical menu. Therefor I think I would have to change the script accordingly to the y-axis. I've tried that but failed. Can you point me to a correct script for a y-axis drag-and-drop? Is ist possible to add some inertia to the script so the rolling effect will last for a second after releasing the mouse button and then slowly stops?

                    I would really be happy if you could drop me a line.

                     

                    Kind regards from Germany

                    Raoul

                    • 8. Re: Re: drag-and-drop utility for Edge Animate(only x-axis)
                      YOSHIOKA Ume Community Member

                      Hi, Raoul.

                      I think, It's better to using jQuery ui plugin.

                      jQuery UI

                       

                      y-axis drag & drop code is like this.

                       

                      //document.compositionReady

                      yepnope({nope:&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",complete:init});

                      var requestAnimationFrame = window.requestAnimationFrame =

                        window.requestAnimationFrame || window.mozRequestAnimationFrame ||

                        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

                       

                      var startTime

                      var pow

                      var POW_SCALE = 10;

                      var POW_FRICTION = 0.95;

                       

                      function init(){

                        sym.$(&quot;Rectangle&quot;)

                        .mousedown(function(){

                        startTime = Date.now();

                        })

                        .draggable({

                        axis:&quot;y&quot;,

                        stop:function(event,ui){

                        //calc pow. Please adjust as you like

                        pow = POW_SCALE*(ui.offset.top-ui.originalPosition.top)/(Date.now()-startTime);

                        //func for move

                        var move = function(){

                        //move sym

                        sym.$(&quot;Rectangle&quot;).css(&quot;top&quot;,&quot;+=&quot; + pow);

                        //slow down

                        pow*=POW_FRICTION;

                        if(Math.abs(pow)&gt;1){

                        requestAnimationFrame(move);

                        }

                        }

                        requestAnimationFrame(move);

                        }

                        })

                      }

                       

                      HTH.

                      Ume

                      • 9. Re: drag-and-drop utility for Edge Animate(only x-axis)
                        raoultomada Community Member

                        Hi Ume,

                         

                        thank you so much for the quick reply. You've really helped me out.

                        I will have a look at jQuery UI later. Thank for pointing me at that.

                         

                        Cheers

                        Raoul

                         

                        Von meinem iPad gesendet

                         

                        Am 07.06.2014 um 03:07 schrieb YOSHIOKA Ume <forums_noreply@adobe.com>:

                         

                         

                        Re: drag-and-drop utility for Edge Animate(only x-axis)

                        created by YOSHIOKA Ume in Edge Animate CC - View the full discussion

                        Hi, Raoul.

                         

                        I think, It's better to using jQuery ui plugin.

                         

                        jQuery UI

                         

                         

                         

                        y-axis drag & drop code is like this.

                         

                         

                         

                        //document.compositionReady

                         

                        yepnope();

                         

                        var requestAnimationFrame = window.requestAnimationFrame =

                         

                          window.requestAnimationFrame || window.mozRequestAnimationFrame ||

                         

                          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

                         

                         

                         

                        var startTime

                         

                        var pow

                         

                        var POW_SCALE = 10;

                         

                        var POW_FRICTION = 0.95;

                         

                         

                         

                        function init(){

                         

                          sym.$(&quot;Rectangle&quot;)

                         

                          .mousedown(function(){

                         

                          startTime = Date.now();

                         

                          })

                         

                          .draggable({

                         

                          axis:&quot;y&quot;,

                         

                          stop:function(event,ui){

                         

                          //calc pow. Please adjust as you like

                         

                          pow = POW_SCALE*(ui.offset.top-ui.originalPosition.top)/(Date.now()-startTime);

                         

                          //func for move

                         

                          var move = function(){

                         

                          //move sym

                         

                          sym.$(&quot;Rectangle&quot;).css(&quot;top&quot;,&quot;+=&quot; + pow);

                         

                          //slow down

                         

                          pow*=POW_FRICTION;

                         

                          if(Math.abs(pow)&gt;1){

                         

                          requestAnimationFrame(move);

                         

                          }

                         

                          }

                         

                          requestAnimationFrame(move);

                         

                          }

                         

                          })

                         

                        }

                         

                         

                         

                        HTH.

                         

                        Ume

                         

                        Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at https://forums.adobe.com/message/6440716#6440716

                        Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page:

                        To unsubscribe from this thread, please visit the message page at . In the Actions box on the right, click the Stop Email Notifications link.

                        Start a new discussion in Edge Animate CC by email or at Adobe Community

                        For more information about maintaining your forum email notifications please go to http://forums.adobe.com/thread/416458?tstart=0.

                         

                        • 10. Re: Re: drag-and-drop utility for Edge Animate(only x-axis)
                          raoultomada Community Member

                          Hi Ume,

                          your tip with the class did the trick. Now I have interaction and the pics are draggable.

                          But I still have a funny behavior with the images. My stage is 1920 by 1080 px. I use 5 pics with a width of 384 px each so they fill the width of the stage completely.  In Edge everything looks fine but when I test the scene in my browser only 4 images are shown (the 5th is gone). When I drag to the left the first pic on the left exits the stage perfectly and smooth but doesn't re-enter outside the right side of the stage. Instead it enters the screen a lot more to the middle.

                          image1 Kopie.jpg

                          Does anyone have an idea what I am missing?


                          Cheers and thanks

                          Raoul

                          • 11. Re: Re: drag-and-drop utility for Edge Animate(only x-axis)
                            YOSHIOKA Ume Community Member

                            Hi, Raoult

                            Your images is too short. I think that there is no need to rotate.

                            But, if you want, the easiest way is "add  a copy of the five images to the end"

                             

                            pic1-pic2-pic3-pic4-pic5 → pic1-pic2-pic3-pic4-pic5-pic1copy-pic2copy-pic3copy-pic4copy-pic5copy

                             

                            thanks.

                            Ume.

                            • 12. Re: Re: drag-and-drop utility for Edge Animate(only x-axis)
                              raoultomada Community Member

                              Hi Ume,

                               

                              thanks for you answer. I've already tried that without success. I will give it another try tomorrow.

                               

                              cheers

                              raoul

                              • 13. Re: Re: drag-and-drop utility for Edge Animate(only x-axis)
                                raoultomada Community Member

                                He Ume,

                                 

                                suddenly it seems to be working. You were right - the images were to short. Duplicating them did the trick. Thanks for your input. You really helped me.

                                 

                                Cheers

                                Raoul

                                • 14. Re: drag-and-drop utility for Edge Animate(only x-axis)
                                  bustedvillain

                                  I’ve used the drag and drop utility for a long time, but I’ve always had an Issue that don’t know how to solve. I don’t know if you have faced the same problem, that is the ‘coordinates precision problem’ when I try to set a Responsive Scaling Canvas with Adobe Edge, it loses all precision, and the droppabble target never accepts the element that your are trying to drop, unless you find the right displacement of the coordinates, but visually is all wrong. I hope you can help me with this. I’m also using the jQuery UI Library. Cheers.