Tinder style drag gesture and drop with Javascript?

Question

I'm trying to figure out what libraries I can use for a Tinder-style drag and drop gesture that only uses Javascript.

1. Needs to create an HTML element that responds to a drag gesture..
2. When touched and held, allows the element to follow the user's finger around.

3. When the user removes his finger, the element either:

   animates back to its original position

   if the element is over a specified drop zone when it is released, the element will animate and disappear and there needs to be some kind of event that triggers that contains which element was dropped and which drop zone it was dropped into

I've looked into HammerJS but it doesn't seem like there is support for drop zones.

jQuery's Hover event doesn't seem to work for fingers.

Solution 1

My solution for this when I needed to support both desktop and mobile dragging event was to use touch-punch and Jquery-UI.

It maps the touch events (start/move/end) to the mouse events and for the basic jquery ui draggable features has worked really well. No extra code and i could use draggable and droppable as needed to do the drop, over and out functions.

For some examples of the drag and drop in jquery UI have a look at http://jqueryui.com/droppable/#revert http://jqueryui.com/draggable/

these will both work with touch events when including touch-punch on your page along with jquery-ui

combine with fast-click to remove the 300ms delay in touch events and the lag of dragging can be greatly improved here is an example (example is from jquery-ui just added touch punch and fast 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!" );
      }
    });
  });

Solution 2

I am the author of Swing:

A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder.

The underlying implementation is using HammerJS to handle the drag/touch gestures and Rebound to calculate and action the spring dynamics (when you drop the card into the deck).

The current implementation does not implement drop zones. The current implementation relies on throwOutConfidence. By default, card is considered out of the deck when its been dragged more than half of its width. However, you can overwrite throwOutConfidence in configuration to relay on custom logic, e.g. how near the card is your card deck (zone designed for dropping the card).

There is a standalone version:

https://github.com/gajus/swing

and angular version:

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

Solution 3

jTinder seems to be very close to what you're looking for. The other comments on this page were mostly written before jTinder became available.

jTinder Demo

jTinder Source code on Github

Other closely related question: Swiping through photo stack like Tinder - Cross-platform (Hybrid / HTML5 is OK)

Please leave comments below on your experience with jTinder and the response speed with various devices.