jQueryでドラッグの速度を調べる

【JavaScript jQuery3.4.1】

前回の続き。

前回のプログラムに、ちょっとした機能を追加してみる。
箱をぶん投げる仕組みをなんとなく作りたくなったので、とりあえずドラッグしてる最中のドラッグ速度を調べるプログラムを書いてみる。
ざっくり書くとこんな感じだ。

var point = false;
var pointdd = Array(0, 0);
var pointd0 = false;
function spcount(){
	if(point == false){
		pointdd = Array(0, 0);
	} else {
		if(pointd0 == false) {
			pointd0 = point;
		}
		pointdd = Array(point[0] - pointd0[0], point[1] - pointd0[1]);
		$("#box").text(pointdd[0]+":"+pointdd[1]);
		pointd0 = point;
	}
	setTimeout(function(){spcount();}, 100);
}
$(function () {
	spcount();
});

前回中途半端な位置に定義していたpointを上記のように先に定義しておく。
自動実行されるやつが、ドラッグより先に来てしまうからだ。
上記のプログラムは100msごとにドラッグの処理で使っているマウスの位置情報からドラッグ速度を割り出して記録し、箱にx,y座標の速度を表示する(Xpx/100ms)。
※速度と書いていますが±付きなのでベクトル量って書いたほうがいい？

これは前回やった箱の移動と基本的には同じもので、移動させる代わりにそれを速度として定義している。ドラッグをやめたらpointがfalseになるから速度0。

x,yに分解した速度を出していますが、斜め方向の速度を出したい場合は三平方の定理とかなんとかから出してください。今後も特に使わないと思いますが。

それでは
Enjoy jQuery!

追記（サンプルの追加 2020.3.18）