Как реализовать «сопротивление мыши» в JavaScript?

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 было бы немного долго, и я не уверен, какая помощь вам нужна.