div 拖拉效果

<script type="text/javascript">

   /*分析：整个过程分三步走，分别是：获取对象，移动对象，释放对象

     这三个步骤用鼠标的事件来对应是：onmousedown,onmousemove,onmouseup

   */
    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 move(){
        if(down&&event.srcElement==obj){
            with(obj.style){
                posLeft=document.body.scrollLeft+event.x-x;
                posTop=document.body.scrollTop+event.y-y;
            }
        }
    }
    function up(){
        down=false;
        obj.style.zIndex=z;
        obj.releaseCapture();
    }
function test(){
var t = document.getElementById("1");
t.style.display = "block";
}
  </script>

　
<div id="1" onmousedown="init()" onmousemove="move()" onmouseup="up()" style="display:none;position:absolute;top:100px;left:100px;
width:100px;height:150px;border:1px solid #ccc;background:red;z-index:1">div1
<input type="button" value="click" onclick="test();"/>
</div>
<div id="2" onmousedown="init()" onmousemove="move()" onmouseup="up()" style="position: absolute;top:150px;left:150px;
width:100px;height:150px;border:1px solid #666;background:blue;z-index:2">div2</div>
<div id="3" onmousedown="init()" onmousemove="move()" onmouseup="up()" style="position: absolute;top:200px;left:200px;
width:100px;height:150px;border:1px solid #999;background:green;z-index:3;">div3</div>
<input type="button" value="click" onclick="test();"/>