<!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="width:500px; height:500px; border:1px solid #ccc; position:relative; margin:0 auto">
<div id="oDiv" style="width: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>
