jQuery ~ フリック操作（スワイプ操作）を実装(コマンドメモ) #JavaScript

プラグインを使わずにフリック操作を実装してみました。

※今回はSPA方式で作ったので、viewに関してはejsファイル、scssファイルを作成しています。

jsファイルに実装した流れ

端末がタッチパネル操作可能かどうか判定(不可能な場合は別操作を実装することを想定)
フリック対象html要素を設定
端末がタッチパネル操作可能である場合、タッチイベントを追加
タッチ開始位置からタッチ終了位置の差分により、アニメーションを実行
フリック中およびアニメーション実行中は動作が重複しないようフラグを設定

以下に、sampleソースコードを記載します。

flick-sample.js


var $ = require('jquery');

var viewTemplate = require('.../flick-sample-view-template');

// フリック処理中判定フラグ
var flickFlg = false;

// アニメーション中判定フラグ
var animationFlg = false;

// 対象HTML要素の取得
var v = $(viewTemplate);
var flickBox = v.find('.flick-box');

// タッチ開始位置および終了位置を初期化
flickBox._startX = 0;
flickBox._endX = 0;

// 端末の判定(PC or タブレット・スマホ)
if ('ontouchstart' in window) {
  // フリック処理用タッチイベントを追加
  flickBox.on('touchstart', onFlickBoxFlickStart);
  flickBox.on('touchmove', onFlickBoxFlickMove);
  flickBox.on('touchend', onFlickBoxFlickEnd);
} else {
  //PCで行う処理
}

/**
 * フリック開始イベント
 * @param e {object} jQueryイベントオブジェクト
 */
onFlickBoxFlickStart: function onFlickBoxFlickStart(e) {
  // アニメーション中またはフリック中は処理を抜ける
  if (animationFlg || flickFlg) {
    return;
  }

  // フリック処理中判定フラグ
  flickFlg = true;

  // タッチ開始位置を取得
  flickBox._startX = e.originalEvent.changedTouches[0].pageX;
}

/**
 * フリック中イベント
 * @param e {object} jQueryイベントオブジェクト
 */
onFlickBoxFlickMove: function onFlickBoxFlickMove(e) {
  // アニメーション中またはフリック中は処理を抜ける
  if (animationFlg || flickFlg) {
    return;
  }

  // タッチ終了位置を取得
  flickBox._endX = e.originalEvent.changedTouches[0].pageX;
}

/**
 * フリック終了イベント
 */
onFlickBoxFlickEnd: function onFlickBoxFlickEnd() {
  // アニメーション中またはフリック中は処理を抜ける
  if (animationFlg || flickFlg) {
    return;
  }

  // タッチ開始位置と終了位置の差分を計算する
  var diffX = Math.round(flickBox._startX - flickBox._endX);

  // 差分が100より大きい場合はアニメーションを実行
  if (diffX > 100) {
    this.flickBoxAnimation();
  }

  // 各値を初期化、フリック処理中判定フラグ無効にする
  flickBox._startX = 0;
  flickBox._endX = 0;
  flickFlg = false;
}

/**
 * フリックによるアニメーション
 */
flickBoxAnimation: function flickBoxAnimation() {
  // アニメーション中判定フラグを有効にする
  animationFlg = true;

  // フリックによるアニメーションを実行する
  flickBox.stop(false, true).animate({
      marginLeft: 500
    },
    {
      duration: 500,
      queue: false
    });

  // アニメーション中判定フラグを無効にする
  animationFlg = false;
}

flick-sample-view-template.ejs


<div class="flick-sample-view">
  <div class="flick-box">
    フリック
  </div>
</div>

flick-sample.scss


.flick-sample-view {
  width: 100%;
  height: 100%;

  .flick-box {
    overflow: auto;
    width: 500px;
    height: 100%;
    background-color: #ffff00;
  }
}