Sliding a div / modifying a css property when using touch on an ipad

Question

What im looking to achieve is to modify the margin-left css property of a div when someone slides their finger across the div on an ipad.

To explain what i'm trying to do, I have setup this page: http://littleirrepressiblewonton.com/wp7/category/all/

Now when someone clicks on a thumbnail image, it loads a horizontal slideshow of large images. Some of the images are too wide to fit on the ipad and they wish to use touch to drag this horizontal slideshow of images left or right.

The way the divs are setup are as follows:

<div class='WontonGalleryFullsMask'>
<div class='WontonGalleryFulls' data-animating='no'>
    <div class="WontonGalleryFullImage" data-idx="0"  ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster022/2835976114.jpg" alt="VP_test_poster022"  /></div>
    <div class="WontonGalleryFullImage" data-idx="1"  ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster021/663128145.jpg" alt="VP_test_poster021"  /></div>
    <div class="WontonGalleryFullImage" data-idx="2"  ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster020/3945564367.jpg" alt="VP_test_poster020"  /></div>
</div>
</div>

The div.WontonGalleryFullsMask has the following css and is setup as a mask.

height: 523px;
overflow: hidden;
width: 100%;

and then the margin-left property of the div.WontonGalleryFulls div is modified to move the gallery left and right.

So if someone slides 300px on the ipad, I need to modify the margin-left css property of the div.WontonGalleryFulls

I'm looking for a jquery solution as the site is already using it.

Answer 1

i ended up modifying a script from http://popdevelop.com/2010/08/touching-the-web/

$.fn.draggable = function() {


var offset = null;
  var start = function(e) {
    var orig = e.originalEvent;
    var ml = parseInt($(this).css('margin-left'));
    offset = {
      x: orig.changedTouches[0].pageX - ml //pos.left
    };
  };
  var moveMe = function(e) {
    e.preventDefault();
    var orig = e.originalEvent;
    $(this).css({
      'margin-left': orig.changedTouches[0].pageX - offset.x
    });
  };
  this.bind("touchstart", start);
  this.bind("touchmove", moveMe);
};

$('div.WontonGalleryFulls').css('position', 'absolute');
$('div.WontonGalleryFulls').draggable();