Жест перетаскивания стиля Tinder и падение с Javascript?

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

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

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

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

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

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

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

Источник

4 ответа

Решение

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

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

Некоторые примеры перетаскивания в пользовательском интерфейсе jquery можно найти по адресу http://jqueryui.com/droppable/ 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!" );
      }
    });
  });
Источник

Я автор Swing:

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

свинг

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

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

Существует отдельная версия:

https://github.com/gajus/swing

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

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

Источник

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

jTinder Demo

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

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

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

Источник

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

и для угловых: https://github.com/gajus/angular-swing

Источник
Другие вопросы по тегам