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.

Krumm

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

Borroff

Thanks! I checkout out the touch-punch page and there was significant lag on dragging of the box on my S4. Is this something that is just inherent in using JS to do drag gestures? – Krumm

Using it on my HTC-one and if i move my finger really fast it has to then catch up to my finger not like it locking tight to the mouse on the desktop. In our product we don't mind with the lag behind the finger and in most cases at a normal drag speed it's fairly tight and it meant we didn;t have to do anything special between the two cases of a touch or a mouse. I imagine the lag comes from translation of the touch events to a simulated mouse event??? but not sure. – Borroff

Have you tried Hammer? The box drag on their page seems much more fluid and less laggy than touch-punch. Wonder if it can integrate with jQuery UI's droppable stuff. hammerjs.github.io – Krumm

Yeah I remember lookign at it and on it's own its really cool but from everything I read it did not play well with jquery-ui. Just did a quick search to see if anything new has bbeen said on it and found this github.com/hammerjs/hammer.js/issues/54 , hang on ignore that just read the title of it again and that is hammer and touch punch working together, morning eyes are not awake yet. – Borroff

ah just seen this github.com/ngryman/jquery.finger, which reminded me about the 300ms delay mobile devices have, i wonder if that would not be helping with the lag – Borroff

ok using fast click to remove the delay helps a lot (doesn't eliminate) codepen.io/leighquince/pen/ztpCL. Was thinking the delay on the example seemed more than what i normally saw and realized we use fast click but it wasn't added for this reason. – Borroff

Wow, I got it working really well! Very little lag too. Thanks! – Krumm

Answer 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

Percipient

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.

Airship

how to undo swipe in your jTinder reference? – Anytime

Answer 4

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

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

Incubator