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...
});