$(document).ready(function() { var log = $("#log"); var scaleMe = $("#scaleMe"); var pos1 = {}; var pos2 = {}; scaleMe[0].ongesturestart = function(e) { pos1 = { x: e.pageX, y: e.pageY }; log.html(""); } //Below method is used to find the direction in which drag happens. getDirectionFromAngle = function(angle) { var directions = { down: angle >= 45 && angle < 135, //90 left: angle >= 135 || angle <= -135, //180 up: angle < -45 && angle > -135, //270 right: angle >= -45 && angle <= 45 //0 }; var direction, key; for (key in directions) { if (directions[key]) { direction = key; break; } } return direction; }; scaleMe[0].ongesturechange = function(e) { e.preventDefault(); pos2 = { x: e.pageX, y: e.pageY }; var tr = Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x) * 180 / Math.PI; var dir = getDirectionFromAngle(tr); log.append(dir + "</br>"); } scaleMe[0].ongestureend = function(e) { log.empty(); } scaleMe.bind("touchend", function(e) { log.empty(); }); });
Pinch in the yellow region <div id="log">To display the direction</div> <!-- <button id="clickMe">clickMe</button>--> <div id="scaleMe"></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><p><font size="3"><b>Source for this<a target="_blank"href="http://jqfaq.com/how-to-find-the-direction-in-pinching/"</a> JQFaq Question</b></font></p> <iframe id="iframe1" src="http://jqfaq.com/AdPage.html" style="width:100%;border:none;" />
#scaleMe { background-color: #E9F115; border: 2px solid gray; height: 400Px; width: 400px; top: 52px; position: absolute; left: 300px; } #log { width: 100px; border: 2px solid darkOrange; font-size:x-small; }