简单拖动效果

< script >  
var  x,y,z,down = false ,obj    
function  init()
{ 
    obj = event.srcElement      // 事件触发对象 
    obj.setCapture()             // 设置属于当前对象的鼠标捕捉 
    z = obj.style.zIndex           // 获取对象的z轴坐标值 
     // 设置对象的z轴坐标值为100，确保当前层显示在最前面 
    obj.style.zIndex = 100  
    x = event.offsetX    // 获取鼠标指针位置相对于触发事件的对象的X坐标 
    y = event.offsetY    // 获取鼠标指针位置相对于触发事件的对象的Y坐标 
    down = true           // 布尔值，判断鼠标是否已按下，true为按下，false为未按下 
} 

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 >  

< div onmousedown = init() onmousemove = moveit() onmouseup = stopdrag() style = " position:absolute;left:20;top:190;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee " > Layer  1 </ div >  
< div onmousedown = init() onmousemove = moveit() onmouseup = stopdrag() style = " position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee " > Layer  2 </ div >  
< div onmousedown = init() onmousemove = moveit() onmouseup = stopdrag() style = " position:absolute;left:100;top:90;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee " > Layer  3 </ div >  

<!--

本例需要掌握的技巧比较多，捕捉鼠标，获取鼠标位置(相当于对象)，释放鼠标捕捉，文档的滚动距离还有with 语句。 
1 .       setCapture() 设置属于当前文档的对象的鼠标捕捉。 
2 .       event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 
3 .       event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
4 .       releaseCapture() 释放当前文档中对象的鼠标捕捉。 
5 .       scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 
6 .       scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 
7 .        with  为一个或多个语句设定默认对象。 

-->