7

我试图通过拖动来实现页面全景。在我的实现中，用户释放鼠标按钮后页面会移动一段时间，就像在谷歌地图中拖动地图一样。现在我想防止这种影响，当用户释放按钮时鼠标不再移动。问题是，我只是不知道如何在mouseup事件触发时检测鼠标是否真的移动。

现在我试图通过计算拖动速度来解决这个问题，然后将速度与预先设定的“灵敏度”进行比较，这在大多数情况下都有效，但有时会失败。

jsFiddle的简化示例。玩小提琴时，请在 FF 中使用 middlebutton，draggabble 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);

那么，在这种情况下是否甚至可以检测鼠标是否在移动？也许我需要一种不同的方法来完成这项任务？

4

2 回答 2

2

一个想法是在 mouseUp 之后保持 mouseMove 侦听器活动 0.5 秒（设置计时器），如果鼠标在那 0.5 秒内移动（即鼠标位置与 mouseUp 时的位置不同），则假设存在运动并且动画它。

您可能需要使用 0.5 秒来查看最佳感觉。

于 2012-08-29T10:09:23.917 回答
0

您希望视图继续移动并逐渐停止，对吗？

您需要做的就是注意它在 MouseUp 事件之前移动的速度，然后在半秒左右的时间内以增量降低速度。如果按钮没有按下，鼠标是否继续移动应该是无关紧要的。

一旦你“放开球”，它滚动的速度与你的手接下来的动作无关。

因此，您需要在按钮按下时跟踪鼠标速度，然后在按钮向上时“淡出”。

在您的情况下，如果释放按钮时鼠标没有移动，则类比是用户“抓住了球”。所以它应该立即停止。

所以你不需要做任何特别的事情来处理这种情况。如果用户按下按钮停止鼠标，则停止平移。

于 2012-08-29T09:55:06.507 回答