怎样限定DIV拖动的范围，求高手帮忙，在线等～～～万分感谢


<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head> 
<style> 
.dragAble {position:relative;cursor:move;} 
</style> 
<script language="javascript"> 
<!-- 
// Author:  Unkonw 
// Modify:  枫岩@CnLei.com 
var ie=document.all; 
var nn6=document.getElementById&&!document.all; 
var isdrag=false; 
var y,x; 
var oDragObj; function moveMouse(e) { 
 if (isdrag) { 
oDragObj.style.top  =  (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px"; //nTY+"px";
oDragObj.style.left  =  (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px"; //nTX+"px";
        //限制范围
var currentX=parseInt(oDragObj.style.left);
var currentY=parseInt(oDragObj.style.top);
var maxX=parseInt(oDragObj.parentNode.style.width)-parseInt(oDragObj.style.width);
var maxY=parseInt(oDragObj.parentNode.style.height)-parseInt(oDragObj.style.height);

if(currentX < 0){
oDragObj.style.left=0+"px";
}
if(currentY < 0){
oDragObj.style.top=0+"px";
}
if(currentX > maxX){
oDragObj.style.left=maxX+"px";
}
if(currentY > maxY){
oDragObj.style.top=maxY+"px";
}
return false; 
 } 
} function initDrag(e) { 
 var oDragHandle = nn6 ? e.target : event.srcElement; 
 var topElement = "HTML"; 
 while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") { 
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; 
 } 
 if (oDragHandle.className=="dragAble") { 
isdrag = true; 
oDragObj = oDragHandle; 
nTY = parseInt(oDragObj.style.top+0); 
y = nn6 ? e.clientY : event.clientY; 
nTX = parseInt(oDragObj.style.left+0); 
x = nn6 ? e.clientX : event.clientX; 
document.onmousemove=moveMouse; 
return false; 
 } 
} 
document.onmousedown=initDrag; 
document.onmouseup=new Function("isdrag=false"); 
//--> 
</script> 
</head> 
<body> 
<div id="father" style="left:100px;top:100px;width:400px;height:400px;border:dashed 1px #CCCCCC;">
<div id="son" class="dragAble"  style="position:reletive;left:0px;top:0px;width:50px;height:50px;background-color:#fff0f0;border:solid 1px #121212;" />
</body> 
</html>