Swipe Left/Right - Mobile Browsers


Offering the ability for your website's visitors to be able to swipe left/right on images or div blocks of content not only has the "cool factor" associated with native apps, but also allows the developer to optimize use of the minimal space available on mobile browsers. This functionality can be used for a multitude of purposes: presenting featured products from a catalog, display of an artist's portfolio, etc.

In the approach I've outlined below there are three main components involved: identifying JavaScript touch events, using jQuery UI to make an element "draggable," and using 'jQuery UI Touch Punch' to map and convert nicely touch events to their moused event counterparts.


I've broken down the implementation into four steps:

Step 1) Call in the necessary jQuery files
*Include these three jQuery files in the following sequence: first jQuery, then jQuery UI, then Touch Punch:

<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>

<script src="js/jquery.ui.touch-punch.min.js"></script>



Step 2) Initialize variables and add JavaScript event listeners, 'touchstart' and 'touchmove,' to the element we will use as draggable: (in this case, "#feature")

$(document).ready(function(){

   ....

   var startX = 0;
   var endX = 0;
   var dist = 0;

   // div element we will use as draggable
   var feature_area = document.getElementById('feature');

   feature_area.addEventListener('touchstart', function(e){

      // first touch point for this event
      var touchobjstart = e.changedTouches[0];

      // get x position of start touch point, relative to left edge of browser
      startX = parseInt(touchobjstart.clientX);

   }, false);


   feature_area.addEventListener('touchmove', function(e){

      var touchobjmove = e.changedTouches[0];

      // get x position of last touch point
      endX = parseInt(touchobjmove.clientX);

      // total distance in pixels from user's first touch point to last (when 'touchmove' ends / user lifts finger)
      dist = endX - startX;

   }, false);

   ....

}



Step 3) Define the element on your page you want to be draggable: (and since we're going to be swiping left and right, we'll specify the 'X' axis)

$("#feature").draggable({
   axis: 'x',
   revert: 'invalid',

   ....

   // We'll add more code to this block below in Step 4.

});



Step 4) Establish what will constitute your "Swipe left" and "Swipe right" events (We'll do this within the "stop: function() " inside our .draggable jQuery code declaration block). After some trial and error, I decided upon a distance swiped of 50 pixels left or right as a good minimum for triggering your swipe left/right functions:

$("#feature").draggable({
   axis: 'x',
   revert: 'invalid',

   stop: function() {
      // swipe left
      if (dist < -50)
      {
         // call your fabulous function for swipe left
         .....
      }

      // swipe right
      if (dist > 50)
      {
         // call your fabulous function for swipe right
         .....
      }

   }  // end stop: function()

});  // end .draggable declaration




REFERENCES:
A really fantastic Introduction to Touch events in JavaScript

Get jQuery UI Touch Punch here, some brilliant code that converts touch events to moused event conterparts.

See a working example by swiping the "#feature" article element left or right (on your mobile browser of course) on my electronic music website, Electrofans.com. There are a total of six feature articles on the home page, swiping left will advance from one to the next, swiping right will take you back to the previous feature (touch to visit article).

Thanks for reading, and happy coding!