在 ipad 上使用触摸时滑动 div/修改 css 属性答案

【问题标题】：Sliding a div / modifying a css property when using touch on an ipad在 ipad 上使用触摸时滑动 div/修改 css 属性
【发布时间】：2012-05-29 04:16:44
【问题描述】：

我希望实现的是当有人在 ipad 上的 div 上滑动手指时修改 div 的 margin-left css 属性。

为了解释我想要做什么，我设置了这个页面： http://littleirrepressiblewonton.com/wp7/category/all/

现在，当有人单击缩略图时，它会加载大图像的水平幻灯片。有些图像太宽而无法放在 ipad 上，他们希望使用触摸来左右拖动此水平幻灯片图像。

div的设置方式如下：

<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>

div.WontonGalleryFullsMask 具有以下 css 并设置为掩码。

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

然后修改 div.WontonGalleryFulls div 的 margin-left 属性来左右移动图库。

所以如果有人在ipad上滑动300px，我需要修改div.WontonGalleryFulls的margin-left css属性

我正在寻找一个 jquery 解决方案，因为该网站已经在使用它。

【问题讨论】：

标签： javascript jquery ipad swipe-gesture

【解决方案1】：

我最终从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();

【讨论】：