1 Reply Latest reply on Sep 17, 2013 11:30 AM by gcgCui

    Infinite draggable

    szuro Level 1



      I have an animation that shows a briefcase with a combination lock as shown. I created a vertical png graphic of the numbers 0 thru 9. I then attached two more copies of the graphic end to end to each other to make one long strip of repeating numbers 0 thru 9. I then grouped the graphic as a single object and named it NumFirst and positioned it for the first tumbler of the lock. I did this two more times (NumSecond, NumThird) for the other two tumblers. I then created a graphic mask and positioned it so only three of the numbers are visible (as shown) giving the illusion of the tumblers. Using jquery draggable and restricting the drag along the y-axis, I can drag the individual tumblers up and down as though I was setting the combination. I did this in Edge Animate and the interactive animation looks great! However, I'm limited to how far I can drag the graphic because eventually I reach the end of it. My coding skills with jquery and javascript are growing, but I have hit a snag. How can I get the number graphic to repeat itself (either up or down) after it is dragged for a certain length, giving the illusion that the tumbler is going around and around. Here is my code so far which is in the creationComplete of my edge file:


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


      function init(){

          sym.$('NumFirst').draggable({ axis: "y" });

          sym.$('NumSecond').draggable({ axis: "y" });

          sym.$('NumThird').draggable({ axis: "y" });




        • 1. Re: Infinite draggable

          Hi I have an answer and a question . For your problem I have an idea, you can falsify the wheel with something like this...


          1- Create a 0 and 9 separate from the wheel and put this like one more of the series to drag and drop it.


          2- Then create an animation for the wheel with two key frames for the position one for the 0  at 0s and other for the 9 position maybe at 1s. Make sure to add a stop function at this key frames.


          3- At your code create a function for the separate 0 and 9 this you have to make this function call the animation of the wheel when you drag it up or down depends of the number... if (0 position ==  Position to show the wheel number){wheel.play(0/1000)};


          With this I think it works because while you are dragging the 0/9 numbers you are positioning the wheel in the background....


          Hope this works...


          And my question is about the touch-punch I have a draggable image working on browser with mouse down for drag and mouse up for destroy the drag (I need to do it like this because a trigger moves a symbol).But I can´t get this working on iOS. At the index I have a


          document.ontouchmove=function(e){ e.preventDefault();



          to avoid the scrolling on the app. And on my yepnope the ui implementation and the scrolling it´s fixed but I can´t dragg my image. Do you know something about that.




          Thanks so much!!