Page Capture - Touch Drag

by Paulo Ávila

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="box" id="'main-box" onclick="void(0)">Hello World</div>
</body>
</html>

CSS

.box {
    position: absolute;
    height: 150px;
    width: 150px;
    background-color: green;
}

.box:active {
    background-color: orange;
}

JavaScript

// http://www.quirksmode.org/mobile/tableTouch.html
// http://www.quirksmode.org/m/tests/touch.html

// http://popdevelop.com/2010/08/touching-the-web/

// http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
// http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/InteractiveVisualEffects/InteractiveVisualEffects.html

function Box(inElement)
{
    var self = this;
 
    this.element = inElement;
 
    this.scale = 1.0;
    this.rotation = 0;
    this.position = '0,0';
 
    this.element.addEventListener('touchstart', function(e) { return self.onTouchStart(e); }, false);
    this.element.addEventListener('gesturestart', function(e) { return self.onGestureStart(e); }, false);
}

Box.prototype = {
  get position()
  {
      return this._position;
  },

  set position(pos)
  {
      this._position = pos;
   
      var components = pos.split(',');
      var x = components[0];
      var y = components[1];
   
      const kUseTransform = true;
      if (kUseTransform) {
          this.element.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
      }
      else {
          this.element.style.left = x + 'px';
          this.element.style.top = y + 'px';
      }
  },

  // position strings are "x,y" with no units
  get x()
  {
      return parseInt(this._position.split(',')[0]);
  },
   
  set x(inX)
  {
      var comps = this._position.split(',');
      comps[0] = inX;
      this.position = comps.join(',');
  },
   
  get y()
  {
      return parseInt(this._position.split(',')[1], 10);
  },
   
  set y(inY)
  {
      var comps = this._position.split(',');
      comps[1] = inY;
      this.position = comps.join(',');
  },

  onTouchStart: function(e)
  {
      // Start tracking when the first finger comes down in this element
      if (e.targetTouches.length != 1)
          return false;
   
      this.startX =...