Stile di esca trascinare il gesto e rilasciare con Javascript?

Question

Sto cercando di capire quali librerie posso usare per un gesto di trascinamento e rilascio in stile Tinder che utilizza solo Javascript.

1. ha bisogno di creare un elemento HTML che risponde a un movimento di trascinamento ..
2. Quando tenuto premuto, consente l'elemento di seguire dito dell'utente intorno.

3. Quando l'utente rimuove il dito, l'elemento sia:

   anima la indietro alla sua posizione originale

   se l'elemento è su una zona di destinazione specificata quando viene rilasciato, l'elemento animerà e scompaiono e ci deve essere un qualche tipo di evento che attiva che contiene il quale elemento è stato eliminato e che Drop zone è stata abbandonata in

ho guardato in HammerJS, ma non sembra che ci sia il supporto per le aree di rilascio .

L'evento Hover di jQuery non sembra funzionare per le dita.

Answer 1

La mia soluzione per questo, quando avevo bisogno di supportare l'evento di trascinamento desktop e mobile, era usare touch-punch e Jquery-UI.

Mappa gli eventi di tocco (avvio/spostamento/fine) agli eventi del mouse e per le funzioni di trascinamento di jquery di base ha funzionato molto bene. Nessun codice extra e potrei usare draggable e droppable come necessario per fare le funzioni drop, over e out.

Per alcuni esempi di drag and drop in jQuery UI un'occhiata a http://jqueryui.com/droppable/#revert http://jqueryui.com/draggable/

questi saranno entrambi lavoro con gli eventi touch quando tra cui touch-pugno sulla tua pagina con jQuery-ui

combinano con fast-click per rimuovere il ritardo 300ms in eventi di tocco e il ritardo di trascinamento può essere notevolmente migliorato ecco un esempio (esempio è da jQuery-ui appena aggiunto tocco pugno e veloce click) 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

Partenza swing JS: https://github.com/gajus/swing

e per angolare: https://github.com/gajus/angular-swing

Answer 3

jTinder sembra essere molto vicino a quello che stai cercando. Gli altri commenti su questa pagina sono stati scritti principalmente prima che jTinder fosse disponibile.

jTinder Demo

jTinder Source code su Github

Altra domanda strettamente correlati: Swiping through photo stack like Tinder - Cross-platform (Hybrid/HTML5 is OK)

Si prega di lasciare commenti qui sotto sulla vostra esperienza con jTinder e la velocità di risposta con i vari dispositivi.

Answer 4

Io sono l'autore di Swing:

Un'interfaccia carte a scorrimento. Il colpo-a sinistra/scorri-destra per l'input sì/no. Come visto in app come Jelly e Tinder.

L'implementazione sottostante sta usando HammerJS per gestire il drag/touch e Rebound per calcolare e l'azione delle dinamiche di primavera (quando si rilascia la carta nel mazzo).

L'implementazione corrente non implementa le zone di rilascio. L'attuale implementazione si basa su throwOutConfidence. Per impostazione predefinita, la carta è considerata fuori dal mazzo quando è stata trascinata più della metà della sua larghezza. Tuttavia, è possibile eseguire il comando overwrite throwOutConfidence in configuration sulla logica personalizzata, ad es. quanto vicino la carta è il mazzo di carte (zona progettata per far cadere la carta).

v'è una versione stand-alone: ​​

https://github.com/gajus/swing

e la versione angolare:

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