Touch Demo

Manipulate

Scale & Pan

<div class="touch_container">
	<div class="touch_target">Touch</div>
</div>

$(".touch_target").touch({
  pan: true,
  scale: true
}).on("panstart", function(e) {
  // Handle pan start
  // Cache positions, etc...
}).on("panend", function(e) {
  // Handle pan end
  // Clean up data...
}).on("pan", function(e) {
  var deltaX  = e.deltaX,
    deltaY  = e.deltaY;

  // React to pan...
}).on("scalestart", function(e) {
  // Handle scale start
  // Cache positions, etc...
}).on("scaleend", function(e) {
  // Handle touch end
  // Clean up data...
}).on("scale", function(e) {
  var scale   = e.scale,
    deltaX  = e.deltaX,
    deltaY  = e.deltaY;

  // React to scale and pan...
});

Pan

<div class="touch_container">
	<div class="touch_target">Touch</div>
</div>

$(".touch_target").touch({
  pan: true
}).on("panstart", function(e) {
  // Handle pan start
  // Cache positions, etc...
}).on("panend", function(e) {
  // Handle pan end
  // Clean up data...
}).on("pan", function(e) {
  var deltaX = e.deltaX,
    deltaY = e.deltaY;

  // React to pan...
});

Scale

<div class="touch_container">
	<div class="touch_target">Touch</div>
</div>

$(".touch_target").touch({
  scale: true
}).on("scalestart", function(e) {
  // Handle scale start
  // Cache positions, etc...
}).on("scaleend", function(e) {
  // Handle touch end
  // Clean up data...
}).on("scale", function(e) {
  var scale = e.scale;

  // React to scale...
});