实现层的移动

<! 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"  xml:lang ="en"  lang ="en" >
< head >
   < title ></ title >
   < style  type ="text/css" > ...
  #l1{...}{
    position:absolute;top:100px;left:100px;
    width:100px;height:150px;border:1px solid #ccc;
    background:#f00;
    z-index:1
    }
  #l2{...}{
    position: absolute;top:150px;left:150px;
    width:100px;height:150px;border:1px solid #666;
    background:#0f0;
    z-index:2
  }
  #l3{...}{
    position: absolute;top:200px;left:200px;
    width:100px;height:150px;border:1px solid #999;
    background:#00f;
    z-index:3;
  }
   </ style >
   < script  type ="text/javascript" > ...
    var x,y,z,down=false,obj;
    function init()...{
        obj=event.srcElement;   //获取焦点对象
        obj.setCapture();           //设置鼠标捕捉
        z=obj.style.zIndex;         //取得原z轴位置
        obj.style.zIndex=100;       //设定在最上层
        x=event.offsetX;            //获取鼠标指针相对于触发事件的对象的x位置
        y=event.offsetY;            //获取鼠标指针相对于触发事件的对象的y位置
        down=true;                  //设置鼠标状态为按下状态
    }
    function moveIt()...{
        if(down&&event.srcElement==obj)...{
            with(obj.style)...{
                posLeft=document.body.scrollLeft+event.x-x;
                posTop=document.body.scrollTop+event.y-y;
            }
        }
    }
    function stopDrag()...{
        down=false;
        obj.style.zIndex=z;
        obj.releaseCapture();
    }
   </ script >
</ head >
< body >
< div  id ="l1"  onmousedown ="init()"  onmousemove ="moveIt()"  onmouseup ="stopDrag()" > level1 </ div >
< div  id ="l2"  onmousedown ="init()"  onmousemove ="moveIt()"  onmouseup ="stopDrag()" > level2 </ div >
< div  id ="l3"  onmousedown ="init()"  onmousemove ="moveIt()"  onmouseup ="stopDrag()" > level3 </ div >
</ body >
</ html >

 网上找的学习，学习！