1 Reply Latest reply on Mar 25, 2013 12:48 PM by pushkin_wilder

    Lag in drag with easing interaction on iPad/iBooks Author

    pushkin_wilder

      Hi folks,

       

      I'm doing a drag and drop section in a children's iBooks project that I'm working on and I need it to have some easing.

       

      It works great when I preview it in a browser on my mac, but as soon as I've put it onto iBooks on the iPad it's a bit poor in performance. It does do the easing, but it's a bit jerky at times, this is just about OK, but what isn't OK is that there is a noticable lag (about half a second) between clicking on the 'draggable' <div> and it responding.

       

      I know from reading that this is meant to be down to the need for the iPad to be able to detect if this is going to be a swipe or some other interaction othan just a 'click'.

       

      I had also read that the 'touch-punch' jQuery plugin would sort that lag out.

       

      I have opened the package contents and manually dragged over the relevant libraries for the 'touch-punch' plugin, but it's not working.

       

      Any ideas?

       

       

      The code I'm using in the composition ready section of the stage is as follows:

       

       

       

      yepnope(

      {

          nope:[

              'js/jquery-ui-1.9.2.custom.min.js',

              'js/jquery.ui.touch-punch.min.js',

              'css/jquery-ui-1.9.2.custom.min.css'

           ],

          complete: init

      }

      );

       

      function init() {

          sym.$('draggable').draggable({

       

       

              helper: function(){

                  // Create an invisible div as the helper. It will move and

                  // follow the cursor as usual.

                  return $('<div></div>').css('opacity',0);

              },

       

       

              drag: function(event, ui){

                  // During dragging, animate the original object to

                  // follow the invisible helper with custom easing.

                  var p = ui.helper.position();

                  $(this).stop().animate({

                      top: p.top,

                      left: p.left

                  },1000,'easeOutCirc');

              }

       

       

          });

       

       

      }

       

       

      If anyone had any thoughts or tips that woudl be great.

       

      Thanks,

       

      Tom