參數(shù)解讀
控制距離
JS代碼：
<script>
window.onload=function()
{
var oDiv=document.getElementById('div');
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev) //鼠標(biāo)按下DIV
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft; //鼠標(biāo)的X坐標(biāo)減去DIV的左邊距就等于disX, 這個(gè)disXs是用于確定鼠標(biāo)移動(dòng)DIV時(shí)鼠標(biāo)點(diǎn)和DIV之間的左面距離酗昼，這個(gè)距離是不會(huì)變的，通過這個(gè)新鼠標(biāo)的X坐標(biāo)減去disX就是DIV的Left
disY=oEvent.clientY-oDiv.offsetTop; //鼠標(biāo)的Y坐標(biāo)減去DIV的左邊距就等于disY, 這個(gè)disY是用于確定鼠標(biāo)移動(dòng)DIV時(shí)鼠標(biāo)點(diǎn)和DIV之間的上面距離擎宝，這個(gè)距離是不會(huì)變的压储，通過這個(gè)新鼠標(biāo)的Y坐標(biāo)減去disY就是DIV的Top
document.onmousemove=function(ev) //為了防止鼠標(biāo)移動(dòng)太快而離開了DIV產(chǎn)生了bug磷雇，所以要給整個(gè)頁面加onmousemove事件
{
var oEvent=ev||event;
var oLeft=oEvent.clientX-disX; //新鼠標(biāo)X坐標(biāo)減去disX,也就是鼠標(biāo)移動(dòng)DIV后的Left
var oTop=oEvent.clientY-disY; //新鼠標(biāo)Y坐標(biāo)減去disY,也就是鼠標(biāo)移動(dòng)DIV后的Top
if(oLeft<0) //當(dāng)DIV的Left小于0，也就是移出左邊
{
oLeft=0; //就把DIV的Left設(shè)置為0遣蚀，就不能移出左邊
}
else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕寬度減去DIV的寬度就得出了DIV到達(dá)最右邊的寬度辕坝，如果Left大于這個(gè)像素
{
oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left設(shè)置為這個(gè)像素
}
if(oTop<0) //當(dāng)DIV的To小于0，也就是移出左邊
{
oTop=0; //就把DIV的Top設(shè)置為0领突，就不能移出上邊
}
else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度減去DIV的高度就得出了DIV到達(dá)最下面邊的像素暖璧，如果Top大于這個(gè)像素
{
oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top設(shè)置為這個(gè)像素
}
oDiv.style.left=oLeft+'px'; //DIV的Left設(shè)置為新鼠標(biāo)X坐標(biāo)減去disX的值
oDiv.style.top=oTop+'px'; //DIV的Top設(shè)置為新鼠標(biāo)Y坐標(biāo)減去disY的值
};
document.onmouseup=function() //鼠標(biāo)松開時(shí)
{
document.onmousemove=null; //把鼠標(biāo)移動(dòng)清楚
document.onmouseup=null; //把鼠標(biāo)松開清楚
};
return false; //阻止FireFox的默認(rèn)事件 bug
};
};
</script>
