ドラッグしてページパノラマを実装しようとしました。私の実装では、ユーザーがマウスボタンを離した後、Googleマップで地図をドラッグするように、ページがしばらく移動します。ここで、ユーザーがボタンを離したときにマウスが動かなくなったときに、この影響を防ぎたいと思います。mouseup
問題は、イベントが発生したときにマウスが実際に動いているかどうかを検出する方法がわからないことです。
今のところ、ドラッグ速度を計算してこの問題に取り組み、速度を事前に評価された「感度」と比較しようとしました。これはほとんどの場合機能しますが、失敗することもあります。
jsFiddleの簡略化された例。フィドルで遊ぶときは、FFの中央ボタンを使用してください。ドラッグガブルdivは左ボタンに「固定」されます。
擬似コード:
AniMove = function (doc, element, sensitivity, panspeed, duration) {
var mouseDown = function (e) {
sTime = new Date();
originalX = mouseX = e.clientX;
originalY = mouseY = e.clientY;
/* addEventListeners mousemove & mouseup for document */
return;
},
mouseMove = function (e) {
/* Setting new position for #square + new mouseX & Y */
return;
},
mouseUp = function () {
var dc = 1;
/* removeEventListeners mousemove & mouseup */
eTime = new Date();
vX = Math.round((50 * panspeed) * (originalX - mouseX) / (eTime - sTime));
vY = Math.round((50 * panspeed) * (originalY - mouseY) / (eTime - sTime));
// Check whether mouse is moving or not,
// now checking the speed against sensitivity, which is not reliable
if (Math.abs(vX) < sensitivity){vX = 0;}
if (Math.abs(vY) < sensitivity){vY = 0;}
for (n = 0; n < dur; n++, dc += 0.001) {
vX = Math.round(vX * dec / dc);
vY = Math.round(vY * dec / dc);
delay[n] = setTimeout(endDrag(n, vX, vY), n * 50);
}
return;
},
endDrag = function (n, vX, vY) {
/* Setting new position for #square */
return;
},
dec = 1 - 120 / duration;
panspeed *= -0.01;
duration /= 50;
element.addEventListener('mousedown', mouseDown, false);
}
drag = new AniMove(document, document.getElementById('square'), 20, 100, 500);
それで、この状況でマウスが動いているかどうかを検出することさえ可能ですか?たぶん私はこのタスクのために別のアプローチが必要ですか?