javascript - 如何在 JavaScript 中实现 "mouse resistance"？

Question

我需要在 JavaScript 中实现鼠标抵抗。

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

想象一个大矩形，里面有一个正方形。当在正方形内单击移动鼠标 [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 中执行此操作会有点冗长，我不确定您需要多少帮助。