<!doctype html> <html> <head> <meta charset='utf-8' /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <meta name="apple-touch-fullscreen" content="YES" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <title>兼容手机与PC 拖动 以百分比计算 </title> </head> <body> <div style="500px; height:500px; border:1px solid #ccc; position:relative; margin:0 auto"> <div id="oDiv" style="100px;height:100px;background-color:red;position:absolute; top:0; left:0; cursor: pointer"></div> </div> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script> var oMask = document.getElementById('oDiv'); var oDiv=$("#oDiv"); var oDivW=oDiv.width()/2; var ifKey=false; oDiv.on("mousedown", down); oDiv.on("mousemove", move); oDiv.on("mouseout mouseup", up); // oMask.addEventListener("touchmove", move) function down(e){ e.preventDefault(); e.stopPropagation(); ifKey=true; } function up(e){ e.preventDefault(); e.stopPropagation(); ifKey=false; } function move(e) { var bodyW=500; var bodyH=500; if(ifKey==true){ e.preventDefault();//阻止其他事件 // e.preventDefault(); // 如果这个元素的位置内只有一个手指的话 if(e.type=="mousemove"){ var ox= e.clientX-bodyW-oDivW; var oy= e.clientY; document.title=(oy); if(ox<50){ ox=50; }else if(ox>450){ ox=450 } if(oy<50){ oy=50; }else if(oy>450){ oy=450; } var bfX=(ox-oDivW)*0.2; var bfy=(oy-oDivW)*0.2; oMask.style.left=(bfX)+"%"; oMask.style.top=(bfy)+"%"; } } } </script> </body> </html>