怎样用鼠标拉一个矩形框并将框内所有的div选中？

学习中，做了几个小时做不出来！
找了段代码供你参考：
<HTML>
<HEAD>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT=""><script language="JavaScript">
<!--
var mousex=new Array();
var mousey=new Array();
var i;
var j=0;
var k;
var recordcount=0;
var repeat;
var repeat2;
var repeat3;
var speed=50;function startthis() {
recordcount=1;
i=0;
mousex=new Array();
mousey=new Array();
recordthis();
}function recordthis() {
if (maxnum.value=='' || isNaN(maxnum.value) == true || maxnum.value<0) {
if (recordcount==1) {
mousex[i]=mousefollow.offsetLeft;
mousey[i]=mousefollow.offsetTop;
i++;
k=i;
textfield.value='无时间限制';
}
}
else {
if (recordcount==1) {
if (i<maxnum.value) {
mousex[i]=mousefollow.offsetLeft;
mousey[i]=mousefollow.offsetTop;
i++;
k=i;
textfield.value='剩余'+(maxnum.value-i)+'/50秒';
}
else {
recordcount=0;
textfield.value='时间到';}
}
}
repeat=setTimeout("recordthis()",20);
}function stopthis() {
clearTimeout("repeat");
recordcount=0;
}function playthis() {
clearTimeout("repeat");
clearTimeout("repeat3");
recordcount=0;
if (j<i-1) {
arrow.style.pixelLeft=mousex[j];
arrow.style.pixelTop=mousey[j];
arrow.style.visibility='visible';
j++;
repeat2=setTimeout("playthis()",speed);
}
else {clearTimeout("repeat2");
arrow.style.visibility='hidden';
j=0;
}
}function rewindthis() {
clearTimeout("repeat");
clearTimeout("repeat2");
recordcount=0;
if (k>0) {
arrow.style.pixelLeft=mousex[k-1];
arrow.style.pixelTop=mousey[k-1];
arrow.style.visibility='visible';
k--;
repeat3=setTimeout("rewindthis()",speed);
}
else {clearTimeout("repeat3");
arrow.style.visibility='hidden';
k=i;
}
}function follow() {
mousefollow.style.pixelLeft=document.body.scrollLeft+event.clientX;
mousefollow.style.pixelTop=document.body.scrollTop+event.clientY;
}
// -->
</script>
<link rel="stylesheet" href="test.css" type="text/css">
</HEAD><BODY onmousemove=follow()>
<div id="arrow" style="position:absolute; width:12px; height:21px; z-index:1;visibility:hidden"><img src="jsimg/cursor.gif" ></div>
<div id="mousefollow" style="position:absolute; width:12px; height:21px; z-index:1;visibility:hidden">.</div>
<input type="text" name="maxnum" size="4" maxlength="4"><input type=button onclick=startthis() value=录制><input type=button onclick=stopthis() value=停止><input type=button onclick="speed=50;playthis()" value=播放><input type=button onclick="speed=2;playthis()" value=快放><input type=button onclick="speed=150;playthis()" value=慢放><input type=button onclick="speed=50;rewindthis()" value=倒放><input type="button" name="textfield" style="width:100px" value="无时间限制">
</BODY>
</HTML>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title><style type="text/css">
    <!--
    .myDiv { position:absolute;background: #CCC;border:1px solid #F00;height: 100px;width: 100px;}
    -->
    </style>
    <script language="javascript">
    var startX=startY=endX=endY=0;
    var myDiv;
    document.onmousedown=function()
    {
    startX=event.x;
    startY=event.y;
    }
    document.onmouseup=function()
    {
    endX=event.x;
    endY=event.y
    if(endX!=startX && endY!=startY)
    {
    if(newDiv=document.getElementById("newDiv"))
    {
    document.body.removeChild(newDiv);
    }
    var left=(startX<endX)?startX:endX;
    var top =(startY<endY)?startY:endY;
    myDiv=document.createElement("DIV");
    myDiv.id="newDiv";
    myDiv.style.cssText="position:absolute;left:"+left+"px;top:"+top+"px;width:"+Math.abs(endX-startX)+"px;height:"+Math.abs(endY-startY)+"px;border:1px dotted #999;z-index:100";
    document.body.appendChild(myDiv);

    var divs=document.getElementsByTagName("DIV");
    var ids="";
    for(i=0;i<divs.length-1;i++)
    {
    if(left<divs[i].offsetLeft && top<divs[i].offsetTop && divs[i].offsetLeft+divs[i].clientWidth<myDiv.offsetLeft+Math.abs(endX-startX) && divs[i].offsetTop+divs[i].clientHeight<myDiv.offsetTop+Math.abs(endY-startY)) 
    {
    ids+=divs[i].id+"\t";
    }
    }
    if(ids!="")
    alert("you have selected:\n"+ids);
    }
    }
    </script>
    </head><body>
    <div id="div1" class="myDiv" style="top:100px;left:50px;">div1</div>
    <div id="div2" class="myDiv" style="top:50px;left:200px;">div2</div>
    <div id="div3" class="myDiv" style="top:150px;left:350px;">div3</div>
    </body>
    </html>