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.

Answer 1

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