Przeciągnij i upuść przeciągnij i przewiń z JavaScriptem?

Question

Próbuję dowiedzieć się, jakie biblioteki mogę użyć do gestu przeciągania i upuszczania stylu Tinder, który używa tylko JavaScript.

1. musi utworzyć elementu HTML, który reaguje na gest oporu ..
2. Po dotknięciu i przytrzymaniu pozwala element do naśladowania palec użytkownika dookoła.

3. Gdy użytkownik usuwa palcem, element albo:

   ożywia z powrotem do pierwotnego położenia

   jeśli element jest na określonej strefy zrzutu, gdy zostanie zwolniony, element będzie animować i znikają, a tam musi być jakiś rodzaj zdarzenia, które powoduje, że zawiera który został usunięty i który element spaść strefę było spadła do

Przyjrzeliśmy się HammerJS ale nie wydaje się, jakby to jest wsparcie dla stref upuszczania .

Zdarzenie w akcji jQuery'ego wydaje się nie działać dla palców.

Answer 1

Moim rozwiązaniem dla tego, gdy musiałem obsługiwać zarówno przeciąganie na komputery stacjonarne, jak i mobilne, było użycie touch-punch i Jquery-UI.

Mapuje zdarzenia dotykowe (początek/ruch/koniec) na zdarzenia myszy, a dla podstawowych jquery funkcje przeciągane działały naprawdę dobrze. Brak dodatkowego kodu i mogłem użyć funkcji przeciągania i upuszczania w razie potrzeby, aby wykonać funkcje upuszczania, przewijania i wyjmowania.

Dla niektórych przykładów przeciągnij i upuść w jQuery UI spojrzeć http://jqueryui.com/droppable/#revert http://jqueryui.com/draggable/

te będą zarówno prace z wydarzeniami dotykowych przy tym dotykowym stempla na stronie wraz z jQuery UI

połączyć z , aby usunąć opóźnienie 300ms w zdarzeniach dotyku, a opóźnienie przeciągania można znacznie poprawić tutaj jest przykład (przykład pochodzi z jquery-ui właśnie dodano punktak i szybkie kliknięcie) 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!"); 
     } 
    }); 
    }); 

Answer 2

Wyjazd Swing JS: https://github.com/gajus/swing

i kątowe: https://github.com/gajus/angular-swing

Answer 3

jTinder wydaje się być bardzo blisko tego, co szukasz. Pozostałe komentarze na tej stronie zostały w większości napisane zanim jTinder stał się dostępny.

jTinder Demo

jTinder Source code na Github

Inne ściśle związane pytanie: Swiping through photo stack like Tinder - Cross-platform (Hybrid/HTML5 is OK)

Proszę zostawić komentarz poniżej na swoim doświadczeniu z jTinder i szybkości reakcji z różnymi urządzeniami.

Answer 4

Jestem autorem Swing:

przesuwana interfejs karty. Przesunięcie w lewo/przesunięcie w prawo dla wejścia tak/nie. Jak widać w aplikacjach takich jak Jelly i Tinder.

Podstawowym realizacja używa HammerJS obsłużyć przeciągnij/dotykać gesty i Rebound do obliczenia i działanie dynamikę sprężyna (jeśli upuszczać karty do talii).

Obecna implementacja nie implementuje stref upuszczania. Obecna implementacja opiera się na throwOutConfidence. Domyślnie karta jest uznawana poza talią, gdy została przeciągnięta na więcej niż połowę jej szerokości. Można jednak overwrite throwOutConfidence in configuration przekazywać na niestandardową logikę, np. jak blisko karty znajduje się twoja talia kart (strefa przeznaczona do upuszczenia karty).

Jest to wersja:

https://github.com/gajus/swing

i wersja kątowa:

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