<!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:0px; left:0px; 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=(ox); if(ox<oDivW){ ox=oDivW }else if(ox>(bodyW-oDivW)){ ox=bodyW-oDivW } if(oy<oDivW){ oy=oDivW }else if(oy>(bodyH-oDivW)){ oy=bodyH-oDivW; } oMask.style.left=(ox-oDivW)+"px"; oMask.style.top=(oy-oDivW)+"px"; } } } </script> </body> </html>