jQueryで作るドラッグ判定のよくあるやつ

【JavaScript jQuery3.4.1】

やぁみんな。久しぶり。jQueryしてる？
というわけで今日は、jQuery使う人なら何かと使うことになりそうなドラッグ判定の比較的かんたんな作り方について語っていこう。

ここでは、以前作ったgetCursor(e)を使っていく。うん。
色々と便利なので多分今後も使うよ。

とりあえず、<div id="box"></div>だけ書かれたhtmlを想定しておく。
このdivに、次のようなスタイルを設定して単純な四角を用意する。

#box {
	position: fixed;
	left: 0;
	top: 0;
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}

ということで、今回用意したプログラムはこちら。

$(function () {
	$(document).on("mousedown touchstart", "#box", function (){
		$("#box").addClass("move");
	});
	$(document).on("mouseup mouseleave touchend", function (){
		$("#box").removeClass("move");
		point = false;
	});
	var point = false;
	$(document).on("mousemove touchmove", function (e) {
		if($("#box").hasClass("move")){
			var point0 = getCursor(e);
			if (point === false) {
				point = point0;
			}
			var pointd = Array(point[0] - point0[0], point[1] - point0[1]);
			var x = $("#box").css("left").replace("px", "") - pointd[0];
			var y = $("#box").css("top").replace("px", "") - pointd[1];
			$("#box").css({
				left: x,
				top: y
			});
			point = point0;
		}
	});
});

どーん。はい。これだけですね。
箱をドラッグするだけです。
解説しまーす。

簡単な流れでいうと、
箱をタッチ→箱にmoveクラスを設定→箱を動かす→タッチをやめる→moveクラスを取る
という感じ。

まず、

$(document).on("mousedown touchstart", "#box", function (){
	$("#box").addClass("move");
});
$(document).on("mouseup mouseleave touchend touchcancel", function (){
	$("#box").removeClass("move");
	point = false;
});

まず、この部分でmoveクラスのつけ外しをしています。
箱を触った時点でmoveをつけます。
一方で、moveクラスを外すのは、ウィンドウから外れてしまった場合も考慮して、イベントへの結びつきをちょっと多めにしてある。
point = false; は？ あぁ、次に書くよ。

var point = false;
$(document).on("mousemove touchmove touchcancel", function (e) {
	if($("#box").hasClass("move")){
		var point0 = getCursor(e);
		if (point === false) {
			point = point0;
		}
		var pointd = Array(point[0] - point0[0], point[1] - point0[1]);
		var x = $("#box").css("left").replace("px", "") - pointd[0];
		var y = $("#box").css("top").replace("px", "") - pointd[1];
		$("#box").css({
			left: x,
			top: y
		});
		point = point0;
	}
});

はい。出てきましたね。
var point = false;
定義があとに来ちゃってるのはご愛嬌。処理順の問題でこっちが先に定義されるので問題ない。はずだ。
これは、「前回調査したときカーソルの座標」を表している。
つまり、これが設定されていなければ今回取得した座標point0を入れている。

var pointd = Array(point[0] - point0[0], point[1] - point0[1]);

pointdは前回の座標との差分だ。pointと同じ形式で記録しておけば扱いが簡単だろう？
x,yは箱の座標だね。

var x = $("#box").css("left").replace("px", "") - pointd[0];

箱のx座標は$("#box").css("left")で取れるけどこの値は必ず　100px　のようにpxがついたString形式で返ってくる。そのため数値として使いたいので
.replace("px", "") することで数字だけにして、マイナスの計算をさせることで数値化する。
そう。JavaScriptはマイナスの計算をすると数字に強制するんだ。

$("#box").css({
	left: x,
	top: y
});
point = point0;

座標を決定してから最後に、今回の座標を記録しておく。

こんな感じでドラッグ操作の基礎パターンが完成。
どう？わかった？

おまけ。
反応を良くするために、最小限とは言えない処理をしている部分がある。
CPU的な効率を良くするか反応を充分にするかは、そのときどきで考えてほしい。

追記(サンプル追加 2020.3.18)