急求JavaScript实现鼠标托拽，随鼠标位置变化绘制矩形，急，非常感谢

<html>
<head>
<title>selectarea</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript">
var x0;
var y0;
var objlayer=new Array();
objlayer[0]="Layer1";
objlayer[1]="Layer2";var selectenable=0;
function initselect() {
if (event.srcElement!=selectarea) {
        x0=document.body.scrollLeft+event.clientX;//取到鼠标点下的横坐标document.body.scrollLeft 得到横滚动条的左偏移
        y0=document.body.scrollTop+event.clientY;//取到鼠标点下的纵坐标 event.clientX 得到鼠标在屏幕上的位置。
        selectenable=1;
        }
}
function startselect() {
if (selectenable==1) {
selectarea.style.visibility='visible';
if(document.body.scrollLeft+event.clientX-x0>0) {//判断鼠标是否左右移动
                selectarea.style.left=x0;
                selectarea.style.width=document.body.scrollLeft+event.clientX-x0;
                }
else
                {
                selectarea.style.left=document.body.scrollLeft+event.clientX;//鼠标没有左右移动但可能上下移动所以这里不能少。
                selectarea.style.width=x0-(document.body.scrollLeft+event.clientX);//你注销这些先画个框，在框外上下或者左右移动鼠标试试。
                }
if (document.body.scrollTop+event.clientY-y0>0) {//判断鼠标是否上下移动
                selectarea.style.top=y0;        
                selectarea.style.height=document.body.scrollTop+event.clientY-y0;
                }
else
                {
                selectarea.style.top=document.body.scrollTop+event.clientY;
                selectarea.style.height=y0-(document.body.scrollTop+event.clientY);
                }
        }
}var dx=new Array();
var dy=new Array();
var dragenable2=new Array();
function endselect() {
selectenable=0;
//start 这段代码是察看框是否包含了网页上的某个层
for (i=0; i<objlayer.length; i++) {
layername=eval(objlayer[i]);
        var dx2=(selectarea.offsetLeft+selectarea.offsetWidth)-(layername.offsetLeft+layername.offsetWidth);
        var dy2=(selectarea.offsetTop+selectarea.offsetHeight)-(layername.offsetTop+layername.offsetHeight);
        if (selectarea.offsetLeft-1<layername.offsetLeft && dx2>-1 && selectarea.offsetTop-1<layername.offsetTop && dy2>-1) {
                dx[i]=layername.offsetLeft-selectarea.offsetLeft;//dx[i]记录框和当前层之间的横向距离。
                dy[i]=layername.offsetTop-selectarea.offsetTop;
                dragenable2[i]=1;//该层可以拖动
                }
        else {dx[i]=0;dy[i]=0;dragenable2[i]=0;}//该层不能拖动
        }
window.status=window.status + dragenable2+':'+dx+':'+dy;//在状态显示当前层拖动的坐标有错误。
//end
}function hideselect() {
if (document.body.scrollLeft+event.clientX==x0 && document.body.scrollTop+event.clientY==y0 && event.srcElement!=selectarea)
selectarea.style.visibility='hidden';
}var xx0;
var yy0;
var dragenable=0;
function initdrag() {
xx0=document.body.scrollLeft+event.clientX-selectarea.offsetLeft;//xx0记录拖动前鼠标的横坐标
yy0=document.body.scrollTop+event.clientY-selectarea.offsetTop;//yy0记录拖动前鼠标的纵坐标
dragenable=1;
}function startdrag() {
if (dragenable==1) {
                selectarea.style.left=document.body.scrollLeft+event.clientX-xx0;
                selectarea.style.top=document.body.scrollTop+event.clientY-yy0;
                for (i=0; i<objlayer.length; i++) {
                layername=eval(objlayer[i]);
                                if (dragenable2[i]==1) {
                                layername.style.left=selectarea.offsetLeft+dx[i];
                                layername.style.top=selectarea.offsetTop+dy[i];
                                }
                        }
                window.status=dx+':'+dy+':'+dragenable2;
        }
}function enddrag() {
dragenable=0;
for (i=0; i<objlayer.length; i++) {dragenable2[i]=0;}
}
</script>
<link rel="stylesheet" href="images/test.css" type="text/css">
</head><body bgcolor="#FFFFFF" text="#000000" onmousedown="initselect()" onmousemove="startselect();startdrag()" onmouseup="endselect()" onclick="hideselect()" onselectstart="return false;">
<div id="selectarea" style="cursor:move;position:absolute; width:0px; height:0px; z-index:100; left: 0px; top: 0px;border:1px #000000 dashed ;visibility:hidden" onmousedown=initdrag() onmousemove=startdrag() onmouseup=enddrag()><img src=spacer.gif width=1 height=1></div><div id="Layer1" style="position:absolute; width:100px; height:100px; z-index:2; left: 50px; top: 50px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tbody>
<tr>
<td align="center" bgcolor="#CCCCCC">obj1</td>
</tr>
</tbody>
</table>
</div>
<div id="Layer2" style="position:absolute; width:100px; height:100px; z-index:1; left: 240px; top: 50px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tbody>
<tr>
<td align="center" bgcolor="#000066"><font color="#FFFFFF">obj2</font></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>