Как реализовать смену класса по передвижению курсора вниз с зажатой кнопки мыши?

Question

[Paul Mikhalev]

Имеется 6 кадров анимации, нужно "потянуть" вниз для их смены, то есть переключить класс Visible между блоками картинок. Ещё это и на мобильных устройствах работать должно.
Как я понимаю нужно в настольном браузере эмулировать touch события чтобы работало везде.
И как реализовать такую "анимацию"?

Comments

[Евгений Петров]

Народ увлечён видеоскотами

Answer 1

[Nikolay Talanov]

Код примерно будет выглядеть вот так (работает сразу для мыши и тача):

$(document).on("mousedown touchstart", ".%класс_области_активности_ивентов%", function(e) {
  // если необходимо, сохраняем стартовую позицию ивента
  var startY =  e.pageY || e.originalEvent.touches[0].pageY;

  $(document).on("mousemove touchmove", function(e) {
    // получаем Y координаты во время движения с зажатой мышью/тачем
    var y = e.pageY || e.originalEvent.touches[0].pageY;
    // ваши действия со всей этой фигней
  });

});

$(document).on("mouseup touchend", function() {
  // отключаем обработчики маусмува/тачмува
  $(document).off("mousemove touchmove");
  // действия, которые вы возможно хотите сделать по окончании действий юзера
});

Comments

[Paul Mikhalev]

огромное спасибо

Answer 2

[Евгений Петров]

1. Определяем поддержку touch по наличию window.ontouchstart.
2. Вешаем обработчик на событие mousedown или touchstart (по результатам проверки).
3. В обработчике ставим прослушивание на mousemove, mouseup (touchmove, touchend или touchcancel). Для этого вызываем функцию, в которой всё и устанавливается.
4. В обработчике mouseup (touchend или touchcancel) снимаем прослушивание с указанных выше событий.
5. В обработчике mousemove (touchmove) отменяем действие по умолчанию с помощью preventDefault(). Определяем величину и направление движения. По результатам меняем на предыдущий или следующий кадр. При смене вызываем ту же самую функцию для снятия обработчиков (см. п. 3).

Answer 3

[Вячеслав Успенский]

Как вариант: использовать стандартный drag&drop

Answer 4

[Иван]

Или взять готовый hammer.js