Жест перетаскивания в стиле Tinder с помощью Javascript?

Я пытаюсь выяснить, какие библиотеки я могу использовать для жеста перетаскивания в стиле Tinder, который использует только Javascript.

  1. Необходимо создать элемент HTML, реагирующий на жест перетаскивания.
  2. При касании и удержании позволяет элементу следовать за пальцем пользователя.

  3. Когда пользователь убирает палец, элемент либо:

    анимирует обратно в исходное положение

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

Я просмотрел HammerJS, но не похоже, что там есть поддержка зон перетаскивания.

Событие jQuery Hover, похоже, не работает для пальцев.


javascript gestures
person fuzzybabybunny    schedule 08.09.2014    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Мое решение для этого, когда мне нужно было поддерживать событие перетаскивания как для настольных компьютеров, так и для мобильных устройств, заключалось в использовании touch-punch и Jquery-UI.

Он сопоставляет события касания (начало/перемещение/конец) с событиями мыши, и для основных функций jquery ui draggable работает очень хорошо. Никакого дополнительного кода, и я мог бы использовать draggable и droppable по мере необходимости, чтобы выполнять функции drop, over и out.

Некоторые примеры перетаскивания в пользовательском интерфейсе jquery см. на странице http://jqueryui.com/droppable/#revert http://jqueryui.com/draggable/

они оба будут работать с сенсорными событиями при включении сенсорного удара на вашей странице вместе с jquery-ui

в сочетании с быстрым нажатием устраните задержку в 300 мс в событиях касания, и здесь можно значительно улучшить задержку перетаскивания. является примером (пример из jquery-ui, только что добавленный сенсорный удар и быстрый щелчок) http://codepen.io/leighquince/pen/ztpCL

//normal setup from jquery ui
$(function() {
    $( "#draggable" ).draggable({ revert: "valid" });
    $( "#draggable2" ).draggable({ revert: "invalid" });

    $( "#droppable" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
person Quince    schedule 08.09.2014
comment
Спасибо! Я проверял страницу сенсорного ввода, и при перетаскивании коробки на моем S4 наблюдалась значительная задержка. Это то, что просто присуще использованию JS для выполнения жестов перетаскивания? - person fuzzybabybunny; 08.09.2014
comment
Используя его на моем HTC-one, и если я двигаю пальцем очень быстро, он должен догнать мой палец, а не плотно прижиматься к мыши на рабочем столе. В нашем продукте мы не возражаем против отставания от пальца, и в большинстве случаев при нормальной скорости перетаскивания оно довольно тугое, а это значит, что нам не нужно делать ничего особенного между двумя случаями касания или мыши. Я предполагаю, что задержка возникает из-за перевода событий касания в симулированное событие мыши??? но не уверен. - person Quince; 08.09.2014
comment
Вы пробовали Хаммер? Перетаскивание окна на их странице кажется гораздо более плавным и менее запаздывающим, чем сенсорный удар. Интересно, может ли он интегрироваться с отбрасываемыми элементами пользовательского интерфейса jQuery. hammerjs.github.io - person fuzzybabybunny; 08.09.2014
comment
Да, я помню, как посмотрел на него, и сам по себе он действительно крут, но, судя по всему, что я читал, он не очень хорошо работал с jquery-ui. Просто сделал быстрый поиск, чтобы увидеть, не было ли сказано что-нибудь новое, и нашел этот github. com/hammerjs/hammer.js/issues/54 , держитесь в игноре, просто прочитайте его название еще раз, и это молоток и сенсорный удар работают вместе, утренние глаза еще не проснулись. - person Quince; 08.09.2014
comment
ах, только что видел этот github.com/ngryman/jquery.finger, который напомнил мне о 300 мс задержка у мобильных устройств, интересно, не поможет ли это с отставанием - person Quince; 08.09.2014
comment
Хорошо, использование быстрого щелчка для устранения задержки очень помогает (не устраняет) codepen.io/leighquince/pen /ztpCL. Думал, что задержка в примере кажется больше, чем я обычно видел, и понял, что мы используем быстрый щелчок, но по этой причине он не был добавлен. - person Quince; 08.09.2014
comment
Вау, у меня это работает очень хорошо! Тоже очень небольшое отставание. Спасибо! - person fuzzybabybunny; 08.09.2014

arrow_upward
9
arrow_downward

Я автор Swing:

Пролистываемый интерфейс карт. Свайп влево/вправо для ввода да/нет. Как видно из таких приложений, как Jelly и Tinder.

Качели

Базовая реализация использует HammerJS для обработки жестов перетаскивания/касания и Rebound для расчета и действия пружинной динамики (когда вы бросаете карту в колоду).

Текущая реализация не реализует зоны перетаскивания. Текущая реализация опирается на throwOutConfidence. По умолчанию карта считается выпавшей из колоды, если ее перетащили более чем на половину ширины. Однако вы можете переписать throwOutConfidence в конфигурации, чтобы использовать пользовательскую логику, например. насколько близко к карте находится ваша колода карт (зона, предназначенная для сброса карты).

Есть автономная версия:

https://github.com/gajus/swing

и угловая версия:

https://github.com/gajus/angular-swing

person Gajus    schedule 01.08.2015

arrow_upward
8
arrow_downward

jTinder кажется очень близким к тому, что вы ищете. Другие комментарии на этой странице в основном были написаны до того, как jTinder стал доступен.

демонстрация jTinder

Исходный код jTinder на Github

Другой тесно связанный вопрос: Пролистывание фото стек, как Tinder — кросс-платформенный (подойдет гибрид/HTML5)

Пожалуйста, оставьте комментарии ниже о своем опыте работы с jTinder и скорости отклика на различных устройствах.

person Phil B    schedule 08.01.2015
comment
как отменить свайп в справочнике jTinder? - person Priyanka; 21.02.2017

arrow_upward
0
arrow_downward

Проверьте Swing JS: https://github.com/gajus/swing

и для angular: https://github.com/gajus/angular-swing

person user2254487    schedule 11.11.2014