Question

我需要在javascript中实现鼠标阻力。

作为我的意思的一个例子，想想Enligthenment窗口管理器如何处理屏幕边缘阻力以在不同桌面之间切换，或者如果您不熟悉它：

想象一个内部有正方形的大矩形。当点击移动方块内的鼠标[onmousedown]时，鼠标自动移动直到方形边框，然后运行一些阻力直到达到阈值，然后在较大的矩形内移动。

理想情况下，鼠标光标应该保持在方形内，直到达不到该阈值，并且只有在满足时才离开该区域。

这个地方的任何想法或例子？还非常感谢交叉浏览器解决方案。（低至ie7，即）谢谢！

Answer 1

如上所述，您无法使用Javascript设置鼠标位置。

但是，由于您询问了如何在mousedown上实现此功能，我假设用户正在屏幕上拖动某些内容。所以你可以让他们拖动的元素显示这种行为。您需要两个元素作为区域，一个可以自由拖动目标，另一个可以定义边界的大小。我会用jQuery来缩短代码，但基本上你会有这样的东西。（未经测试的代码）

HTML：

<div class='borderLand'>
    <div class='freeZone'>
        <img class='draggable'>
    </div>
</div>

CSS：

.borderLand {position: relative; width: 110px; height: 110px;}
.freeZone {position: relative; top: 10px; left:10px; height: 100px; width: 100px;}

JS：

我不能把完整的代码写在我的头顶，但算法会像

onmousedown{
  check for click location
  if it's over the draggable (watch for bubbling) begin dragging, set dragging flag
}

onmouseup{
  clear dragging flag if it's set
}

borderland onmouseover{
  if dragging, stop the movement of the draggable (watch for bubbling here too)
}

borderland onmouseout{
  start dragging again (if they move back in or out it doesn't matter, you want to drag)
}

很抱歉，如果您需要更多细节，但在普通JS中这样做会有点冗长，我不确定您需要多少帮助。

如何在javascript中实现“鼠标阻力”？

1 个答案: