JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.10/hammer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.10/jquery.hammer.js"></script>
<span id="logArea"></span>

JavaScript

var startDragAtBorder = false;
$(document).on('touchstart', function(e) {
   var xPos = e.originalEvent.touches[0].pageX;

   if(xPos < 100) {
    startDragAtBorder = true;   
   }
   else{
    startDragAtBorder = false;
   }
});

$(document).hammer().on('drag', function(e){
  if(startDragAtBorder && e.gesture.direction == 'right'){
    var currentText = $('#logArea').text();   
    $('#logArea').text(""+currentText+" . "+e.type);
  }
});