Как определить направление на событие onmousemove?

Question

При некоторых условиях я хочу отменить событие onmousemove, например, когда мышь выходит из строя. Можно ли определить направление события onmousemove? JQ или JS в порядке.

У меня есть элементы drag’n’drop. Пользователь тянет элемент вверх. Например, если нижняя часть элемента достигает какой-либо позиции в документе (то есть 500px от верхней части документа), onmousemove останавливается. И если пользователь снова попытается перетащить элемент вверх, функция не запустится. Только перетаскивание будет возможно для этого элемента. Поэтому я подумал, что было бы довольно легко сделать это, поймав направление события mousemove. Но, похоже, нет таких стандартных свойств.

Answer 1

Вы можете сохранить позицию последнего события mousemove для сравнения с текущей позицией:

//setup a variable to store our last position
var last_position = {},
$output       = $('#output');

//note that `.on()` is new in jQuery 1.7 and is the same as `.bind()` in this case
$(document).on('mousemove', function (event) {

    //check to make sure there is data to compare against
    if (typeof(last_position.x) != 'undefined') {

        //get the change from last position to this position
        var deltaX = last_position.x - event.clientX,
            deltaY = last_position.y - event.clientY;

        //check which direction had the highest amplitude and then figure out direction by checking if the value is greater or less than zero
        if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
            //left
        } else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
            //right
        } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
            //up
        } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
            //down
        }
    }

    //set the new last position to the current for next time
    last_position = {
        x : event.clientX,
        y : event.clientY
    };
});

Вот демоверсия: http://jsfiddle.net/Dv29e/

Обновление

Вы также можете регулировать событие mousemove, чтобы получить более общее представление о том, куда переместилась мышь:

var last_position = {},
    $output       = $('#output'),
    mousemove_ok  = true,
    mouse_timer   = setInterval(function () {
        mousemove_ok = true;
    }, 500);
$(document).on('mousemove', function (event) {
    if (mousemove_ok) {
        mousemove_ok = false;
        ...
    }
});

Это будет проверять только положение курсора относительно его прошлого положения, если:

1. последняя позиция существует.
2. переменная mousemove_ok установлена ​​в true, что выполняется каждые полсекунды.

Вот демоверсия: http://jsfiddle.net/Dv29e/4/

Answer 2

Существуют стандартные свойства, которые показывают дельты, относящиеся к предыдущему событию перемещения мыши:

document.addEventListener('mousemove', function (event) {
  directionX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
  directionY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
});

Как сказано в документации :

MouseEvent.Свойство motionX только для чтения обеспечивает сдвиг в координате X указателя мыши между этим событием и предыдущим событием mousemove.

Answer 3

event.movementX - это разница в пикселях от предыдущей позиции X, например 100 для правого движения 100 пикселей, -100 для левого движения и т. Д., 0 для отсутствия движения.