鼠标勾画选取拖动图形

<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;
 y0=document.body.scrollTop+event.clientY;
 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;
  dy[i]=layername.offsetTop-selectarea.offsetTop;
  dragenable2[i]=1;
  }
 else {dx[i]=0;dy[i]=0;dragenable2[i]=0;}
 }
  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;
yy0=document.body.scrollTop+event.clientY-selectarea.offsetTop;
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>

<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:1; 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>