Basic jQuery touchmove Event Setup

發表於   |   分類於 ，

link: http://www.devinrolsen.com/basic-jquery-touchmove-event-setup/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width, user-scalable=no"> <title>Untitled Document</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript" ></script><style>.droginfo { width:110px; height:20px; background:#00C;}#someElm {width:110px; height:180px; background:#0bC; position:absolute; top:30px;}
</style></head>
<body><div id="movex"></div><div id="movey"></div>

 <div id="someElm">    someElm    </div>

<script type="text/javascript">
 jQuery('#someElm').bind('touchmove',function(e){
          e.preventDefault();
      var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; 
     var elm = jQuery(this).offset();
      var x = touch.pageX - elm.left;
      var y = touch.pageY - elm.top;
      if(x < jQuery(this).width() && x > 0){
          if(y < jQuery(this).height() && y > 0){
                  //CODE GOES HERE
                  //console.log(touch.pageY+' '+touch.pageX);
                  jQuery('#movex').text(touch.pageX);
                  jQuery('#movey').text(touch.pageY);
                            } 
     }});

</script></body></html>