jQuery Mousemove: срабатывает при изменении 5px

По ряду технических причин я реализую свою собственную функцию «перетаскивания» в jQuery, а не использую jQuery UI, и я использую события mousedown и mousemove для прослушивания пользователя, пытающегося перетащить элемент.

Пока это работает хорошо, я просто хотел бы запускать событие mousemove каждые 5 пикселей движения, а не пиксель за пикселем. Я пробовал кодировать просто:

$('#element').bind('mousemove', function(e) {
    if(e.pageX % 5 == 0) {
        // Do something
    }
});

Однако движение не стабильно каждые 5 пикселей, и иногда, если вы двигаете мышь слишком быстро, она пропускает несколько шагов. Я думаю, это потому, что при очень быстром перемещении мыши jQuery не будет запускать событие для каждого пикселя.

Ребята, вы знаете, как запускать событие каждые 5 пикселей?

Большое спасибо,

Антонио


events jquery triggers mousemove
person abmirayo    schedule 09.10.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Ваш код не учитывает, где началось ваше перетаскивание. e.pageX просто даст вам координаты страницы, а не различия. Вам нужно проверить изменение пройденного расстояния.

Этот пост хорош соответствующие.

Вот основной код:

$(document).mousemove(function(event) {
    var startingTop = 10,
        startingLeft = 22,
        math = Math.round(Math.sqrt(Math.pow(startingTop - event.clientY, 2) + 
                                    Math.pow(startingLeft - event.clientX, 2))) + 'px';
    $('span').text('From your starting point(22x10) you moved:   ' + math);
});

РЕДАКТИРОВАТЬ: Теперь я думаю, что понимаю, о чем говорит ОП. Я использовал приведенный выше код, чтобы создать эту скрипку. Он отслеживает вашу текущую позицию относительно верхней левой части экрана и проверяет, не превышает ли ваша разница > 5 пикселей.

Новый скрипт:

var oldMath = 0;
$(document).mousemove(function(event) {
    var startingTop = 10,
        startingLeft = 22,
        math = Math.round(Math.sqrt(Math.pow(startingTop - event.clientY, 2) +Math.pow(startingLeft - event.clientX, 2))) + 'px';
    $('#currentPos').text('you are at :' + math);

    if(Math.abs(parseInt(math) - oldMath) > 5){
        //you have moved 5 pixles, put your stuff in here
        $('#logPos').append('5');


        //keep track of your position to compare against next time
        oldMath = parseInt(math);
    }
});​
person davehale23    schedule 09.10.2012
comment
Спасибо за ответ, davehale23, но это не ответ на мой вопрос. Код, который я предоставил, представляет собой базовый фрагмент, отображающий мой вопрос, а именно, как вызвать перемещение мыши через каждые X пикселей. - person abmirayo; 09.10.2012
comment
о, теперь я понял тебя. Я добавил правку, это больше похоже на то, о чем вы говорите? - person davehale23; 09.10.2012