JS拖动div，要求：在父窗体内拖动

<%@ Page language="c#" Codebehind="WebForm8.aspx.cs" AutoEventWireup="false" Inherits="test.WebForm8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm8</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language=javascript>
var iNodeX;
var iNodeY;
var oNode;
var isDown = false;
var iBodyWidth = 0;
var iBodyHeight = 0;
var iMaxTop = 0;
var iMaxLeft = 0;
var iMinTop = 0;
var iMinLeft = 0;
window.onload = function()
{
iBodyWidth = document.body.clientWidth;
iBodyHeight = document.body.clientHeight;
iMaxLeft = iBodyWidth-100;
iMaxTop = iBodyHeight-100;
}
//开始拖动
//1:在截取层上按下鼠标后设置拖动开始时初始值
function InitDrag()
{
oNode=document.getElementById("div");
oNode.setCapture();                                         //获取当前对象的鼠标捕捉
    
iNodeZ=oNode.style.zIndex;
oNode.style.zIndex=100;                                     //确保当前层显示在最前面 
iNodeX=parseInt(event.offsetX);
iNodeY=parseInt(event.offsetY); 
isDown=true;
} //拖动
//1:限制拖动必须在底图范围内
function OnDrag()
{
if(isDown)
{
ChangePosition();
LimitOnTarget();
}
} //结束拖动
//释放当前对象的鼠标捕捉
function StopDrag()
{
isDown=false                                                //鼠标松开
oNode.style.zIndex=iNodeZ                                   //还原对象的Z轴坐标值 
oNode.releaseCapture()                                      //释放当前对象的鼠标捕捉 
}
//改变截取区域的位置
function ChangePosition()
{
with(oNode.style)
{
posLeft=document.body.scrollLeft+event.x-iNodeX; //设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标
posTop=document.body.scrollTop+event.y-iNodeY; //设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标 
    
}
} //限制在目标对象内拖动
//如果超出了边缘将目标对象的最大/最小值赋给截取层
function LimitOnTarget()
{
var iX = parseInt(oNode.style.left);                        //对象x坐标
var iY = parseInt(oNode.style.top);                         //对象y坐标
var iWidth = parseInt(oNode.style.width);                   //对象宽度
var iHeight = parseInt(oNode.style.height);                 //对象长度
    
var iTagX = 0                  //目标对象x坐标
var iTagY = 0                  //目标对象y坐标
    
var iTagWidth = iBodyWidth;             //目标对象宽度
var iTagHeight = iBodyHeight;           //目标对象长度
    
if(iX<iTagX)
{
oNode.style.left = iTagX;
}
if(iY<iTagY)
{
oNode.style.top = iTagY;
}
if(iX+iWidth>iTagX+iTagWidth)
{
oNode.style.left = iMaxLeft;
}
if(iY+iHeight>iTagY+iTagHeight)
{
oNode.style.top = iMaxTop;
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<div id="div" onmousedown='InitDrag()' onmousemove='OnDrag();' onmouseup='StopDrag()' style="position: absolute;border-top:1px solid BLUE;border-bottom:1px solid BLUE;border-right:1px solid BLUE;border-left:1px solid BLUE; background-color:red; filter: Alpha(opacity=30);width:100;height:100"></div>
</form>
</body>
</HTML>