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" οnmοusedοwn="init()" οnmοusemοve="move()" οnmοuseup="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" οnclick="test();"/>
</div>
<div id="2" οnmοusedοwn="init()" οnmοusemοve="move()" οnmοuseup="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" οnmοusedοwn="init()" οnmοusemοve="move()" οnmοuseup="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" οnclick="test();"/>