【jQuery】スマホ時のタップ・スワイプ処理の実装

コード

<div id="wrap">
  <div class="box">スワイプ削除</div>
</div>
<style>
#wrap {
    position: relative;
    width: 100%;
    max-width: 318px;
}
.box {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    background-color: #ccc; 
}
 </style>

結果

var swWrap = $('#wrap');
var sw = swWrap.children('.box');
sw.bind({
    'touchstart': function(e) {
      e.preventDefault();
      // スワイプした距離を保存(※スワイプした距離を固定する)
      this.pageX = e.originalEvent.touches[0].pageX;        
    }
    ,'touchmove': function(e) {
      if(!this.touched) {
        return;
      }
      e.preventDefault();
      // 右に移動した距離を測定
      this.left = parseFloat($(this).css('left')) - (this.pageX - e.originalEvent.touches[0].pageX);
      // 割り出した距離で要素を動かす
      $(this).css({
        left: this.left
      });
      // スワイプした距離を保存(※スワイプした距離を固定する)
      this.pageX = e.originalEvent.touches[0].pageX;
    }
    ,'touchend': function(e) {
        if(!this.touched) {
          return;
        }
        this.touched = false;
        // 2/3以上スワイプしたか？
        if(Math.abs(this.left) > swWrap.width() * 2 / 3) {
          // スワイプしたので削除
          $('#wrap').hide();
          // スワイプが足りなかったなら
        }else{
          // スワイプが足りなかったら戻る
          $(this).animate({
            left: 0
          }, 200);
        }
      }
});

結果

var swWrap = $('#wrap');
var sw = swWrap.children('.box');

sw.on({
    'touchstart': function(e) {
      e.preventDefault();
      this.pageX = e.originalEvent.touches[0].pageX;
      this.touched = true;
    },
    'touchmove': function(e) {
      if(!this.touched) return;
      e.preventDefault();
      this.left = parseFloat($(this).css('left')) - (this.pageX - e.originalEvent.touches[0].pageX);
      $(this).css({ left: this.left });
      this.pageX = e.originalEvent.touches[0].pageX;
    },
    'touchend': function(e) {
        if(!this.touched) return;
        this.touched = false;
        var isSwiped = Math.abs(this.left) > swWrap.width() * 2 / 3;
        $(this).animate({ left: isSwiped ? swWrap.width() : 0 }, 200);
        if(isSwiped) $('#wrap').hide();
    }
});

実践用 ※☓ボタンあり

var SwipeContent = $('#fixedElement');
SwipeContent.on({
    // タッチ開始時のイベントを設定
    'touchstart': function(e) {
        // ☓ボタンを押したら非表示
        if (e.target.id === 'closeButton') {
            $('#fixedElement').hide();
        }
        e.preventDefault();
        // タッチした位置を固定
        this.pageX = e.originalEvent.touches[0].pageX;
    }
    // タッチ移動時のイベントを設定
    ,'touchmove': function(e) {
        e.preventDefault();
        // スワイプした距離を測定
        this.left = parseFloat($(this).css('left')) - (this.pageX - e.originalEvent.touches[0].pageX);
        // スワイプした距離分、要素を動かす
        $(this).css({ left: this.left });
        this.pageX = e.originalEvent.touches[0].pageX;
    }
    // タッチ終了時のイベントを設定
    ,'touchend': function(e) {
        // 2/3以上スワイプしてるか?
        if(Math.abs(this.left) > SwipeContent.width() * 2 / 3) {
            // 2/3以上スワイプしてたら削除
            SwipeContent.hide();
        // 2/3以上スワイプしてなれば
        }else{
            // 元の位置に戻す
            $(this).animate({ left: 0 }, 200);
        }
    }
});