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

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