ドラッグを判定するjavascript

マウスをクリックした時の位置を取得。
マウスを離した時の位置を取得。
マウスを離した時に、クリックした位置と離した位置の差を測り、一定以上だったらドラッグしたものと判定。

'use strict';

// クリック開始位置を取得
var startX;

document.body.addEventListener('mousedown', function (e) {
	startX = e.pageX;
});

// クリック終了位置を取得して、クリック開始位置と比較
var endX;

document.body.addEventListener('mouseup', function (e) {
	endX = e.pageX;
	// 差が5以上だったらアラート出す
	if (Math.abs(endX - startX) >= 5) {
		alert('ドラッグ！');
	}
});

デモはこちら。
画面場でドラッグすると、アラートで「ドラッグ！」と出ます。

スマホの場合は touchstart と touchend にすればいいですね！

タイトル画像のアイコンはこちらから使用しました。