<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>Title</title> <style> #someElm { width: 100px; height: 100px; background: #ccc; position: absolute; } </style> </head> <body> <header> </header> <div id="main"> <div id="someElm"> </div> </div> <footer> </footer> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <!-- <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>--> <script> $('#someElm').bind('touchmove', function (e) { e.preventDefault(); var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; var elm = $(this).offset(); var x = touch.pageX; var y = touch.pageY;
//防止跑出屏幕
if((x+100)>api.winWidth){
x = api.winWidth - 100
}
if(x<0){
x = 100
}
if((y+100)>api.winHeight){
y = api.winHeight - 100
}
if(y<0){
y = 100
}
$(this).css('left', x + 'px'); $(this).css('top', y + 'px'); console.log(touch.pageY + ' ' + touch.pageX); }); </script> </body> </html>