Touch/Drag Direction

Simple experiment on detecting the direction of a swipe. Works with regular mouse.

HTML

<div id='box'>
  
</div>

CSS

#box {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  text-align: center;
  line-height: 200px;
}

JavaScript

var lastX, lastY;
var $box = $('#box');
$box.text('ready');

$('div').on('touchstart mousedown', function (e) {
  $('div').on('touchmove mousemove', touchmove);
});

$('div').on('touchend mouseup', function (e) {
  $('div').off('touchend mousemove', touchmove);
  $box.text('ready');
});

function touchmove (e) {
  var currentX, currentY;
  var buffer = 1000;
  
  currentX = e.originalEvent.touches ? e.orginalEvent.touches[0].clientX : e.originalEvent.clientX;
  currentY = e.originalEvent.touches ? e.originalEvent.touches[0].clientY : e.originalEvent.clientY;

  if (currentY > lastY) {
    $box.text('down');
  } else if (currentY < lastY) {
    $box.text('up');
  }
  lastY = currentY;
  
  if (currentX > lastX) {
    $box.text('right');
  } else if (currentX < lastX) {
    $box.text('left');
  }
  lastX = currentX;
}