@H_5020@拖拽的原理
@H502_0@1.获取距离(鼠标的位置-odiv的外边距)
@H_5020@2.理解什么时候用onmousemove事件
@H5020@3.判断是否过界
@H502_0@HTML代码:
<div class="jb51code">
<pre class="brush:xhtml;">
<div id="div1">
document.onmousemove=function(ev){
var oEvent=ev||event;
var left=oEvent.clientX-x;
var right=oEvent.clientY-y;
//判断左边是否过界
if(left<0){
left=0;
}
//判断右边是否过界
else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){
left=document.documentElement.clientWidth-oDiv.offsetWidth;
}
//判断上边是否过界
if(right<0){
right=0;
}
//判断下边是否过界
else if(right>document.documentElenment.clientHeight){
right=document.documentElenment.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=left+"px";
oDiv.style.top=right+"px";
}
document.onmouseup=function(){
//清空document的事件
document.onmousemove=null;
document.onmouseup=null;
}
//<a href="/tag/jiejue/" target="_blank" class="keywords">解决</a>低版本火狐bug,干掉系统默认
return false;
}
}