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 respond

Answer 1

Check out Swing JS : https://github.com/gajus/swing

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

Answer 2

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!" );
      }
    });
  });

Answer 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.

Answer 4

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