スワイプ処理を実装してみる

スマートフォン向けにスワイプ処理を実装する機会があったのでメモ。こちらの記事を参考にさせていただきました。

サンプルコード

HTML

<div id="wrap">
<div class="box"></div>
</div>

.boxをスワイプで動かすようにします。

CSS

#wrap {
	position: relative;
	width: 100%;
	max-width: 318px;
}
.box {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
}

今回は.boxを横に移動させるので、スワイプした距離や方向に応じてleftの値を変更します。

JavaScript

$(function() {
	// 移動する要素の親要素(スワイプ後の位置を確認するのに使用)
	var swWrap = $('#wrap');
	// 移動する要素
	var sw = swWrap.children('.box');
	var isTouch = ('ontouchstart' in window);
	// 初期位置
	var basePoint;
	// 移動する要素にイベントが発生した時
	sw.bind({
		// タッチ開始
		'touchstart mousedown': function(e) {
			e.preventDefault();
			// 画面の左端からの座標
			this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
			// basePointとthis.leftに現在のleftの値(0)を追加
			basePoint = this.left = parseFloat($(this).css('left')); 
			this.touched = true;
		},
		// タッチ中
		'touchmove mousemove': function(e) {
			if(!this.touched) {
				return;
			}
			e.preventDefault();
			// 移動要素のleftに入れる値
			this.left = parseFloat($(this).css('left')) - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );
			$(this).css({
				left: this.left
			});
			// 画面の左端からの座標
			this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
		},
		// タッチ終了
		'touchend mouseup': function(e) {
			if(!this.touched) {
				return;
			}
			this.touched = false;
			// 移動要素が親要素の範囲より右にはみ出しているとき
			if(this.left > 0) {
				// 移動要素と親要素の左端を合わせる
				$(this).animate({
					left: 0
				}, 200);
			// 移動要素が親要素の範囲より左にはみ出しているとき
			} else if(this.left < swWrap.width() -  sw.width()) {
				// 移動要素と親要素の右端を合わせる
				$(this).animate({
					left: swWrap.width() -  sw.width()
				}, 200);
			} else {
			}
		}
	});
});

タッチ完了後、左右に移動しすぎている場合は端まで戻ってくるようにしています(40～53行目)。

PCでも動作するようになっていますが、スマートフォンのみでの処理にしたい場合は
11行目のmousedown、20行目のmousemove、34行目のmouseupを削除することで可能です。

スワイプ処理を実装してみるのデモページ

【参考サイト】

• iPhone/Android/PC 対応。jQuery で書くタッチイベント (フェンリル | デベロッパーズブログ)