JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
</head>

<body>

  <div id="container">
    <header>

    </header>
    <div id="main" role="main">
        <h1>Debug Stuff:</h1>
        <ul id="debug">
        
        </ul>
    </div>
    <footer>

    </footer>
  </div> <!--! end of #container -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
    window.onload = function() {
        var swipev = new Swipe("main");
        swipev.onswipedown = function() { alert('down'); };
        swipev.onswipeup = function() { alert('up'); };
        swipev.onswipeleft = function() { alert('left'); };
        swipev.onswiperight = function() { alert('right'); };
    }
  </script>

  
</body>
</html>

CSS

#main {
    height: 500px;
    width: 500px;
    background: hotpink;
}

JavaScript

function Swipe(id) {

    // Constants
    this.HORIZONTAL     =     1; // Do not change.
    this.VERTICAL         =     2; // Do not change.
    this.RATIO            =    3;
    this.GESTURE_DELTA     =     60; // The min delta in the axis to fire the gesture
    
    // Variables for position of touch
    this.ldx = 9999;
    this.hdx = 0;
    this.ldy = 9999;
    this.hdy = 0;
    
    // Public members
    this.direction         =     this.VERTICAL;
    this.element         =     document.getElementById(id);
    this.onswiperight     =     null;
    this.onswipeleft     =     null;
    this.onswipeup         =     null;
    this.onswipedown     =     null;
    this.inGesture         =     true;
    
    // Private members
    this._fingers        =    0;
    this._originalX     =     0;
    this._originalY     =     0;
    this._lastX     =     0;
    this._lastY     =     0;
    
    var _this = this;
    // Makes the element clickable on iPhone
    this.element.onclick =     function() {void(0)};
    
    var mousedown = function(event) {
        // Finger Press
        event.preventDefault();
        _this.inGesture = true;
        _this._originalX = (event.touches) ? event.touches[0].pageX : event.pageX;
        _this._originalY = (event.touches) ? event.touches[0].pageY : event.pageY;
        
        // Only for iPhone
        // if (event.touches && event.touches.length!=1) {
            //_this.inGesture = false; // Cancel gesture on multiple touch
        // }
        
        $('#debug').append('<li><b>Mouse down</b>: Original X = ' + _this._originalX + ' and Original Y = ' + _this._originalY + '</li>');
    };
    
    var mousemove = function(event) {
        
        // Finger moving
        event.preventDefault();
        
        // Get coordinates using iPhone or standard technique
        var currentX = (event.touches) ? event.touches[0].pageX : event.pageX;
        var currentY = (event.touches) ? event.touches[0].pageY : event.pageY;

   ...