<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('box1');
//console.info(getPos(oDiv).leftX);//测试可以
//三个事件
//兼容性没有做判断
//通过以下两种可实现ie7及以下浏览器的兼容
//setCapture全局捕获 再释放捕获
//return false
//以前两种可实现兼容性问题，并没有用浏览器做兼容实验 所用版本，chrome 40几来着记不清了
//也可做函数封装drag
oDiv.onmousedown=function(){
//当触发鼠标down事件时才能触发其它两事件
var e=window.event||evt;
var disX=e.clientX-getPos(oDiv).leftX;
var disY=e.clientY-getPos(oDiv).topY;
//oDiv.onmousemove拖快了会出现bug，调下就知道
document.onmousemove=function(evt){
var e=window.event||evt;
//限定拖的范围
//磁性吸引 当靠近左边框100内自动跑到左边
var L=e.clientX-disX;
var T=e.clientY-disY;
if(T<0){
T=0;
}
if(L<100){
L=0;
}
oDiv.style.left=L+'px';
oDiv.style.top=T+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
};
};
};
//封装一个获得绝对位置的函数
function getPos(obj){
var pos={
"leftX":0,
"topY":0
};
while(obj){
pos.leftX+=obj.offsetLeft;
pos.topY+=obj.offsetTop;
obj=obj.offsetParent;
}
return pos;
}
</script>
<style>
#box1{width:100px;height:100px;background:#C33;position:absolute;}
</style>
</head>
<body>
<div id='box1'>
</div>
</body>
//到此结束 