div层拖动通俗易懂版

<html>
<style id="css"> 
body{font-family:Verdana;font-size:11px;color:#333;} 
#win{position:absolute;left:100px;top:100px;width:200px;height:150px;border:1px solid #000;} 
.title{width:100%;background:#000;height:18px;color:#fff;cursor:hand;} 
</style> 
<script> 
var x0=0,y0=0,x1=0,y1=0; 
var moveable=false; 
//开始拖动;  
function startDrag(evt){ 
    var dragObj=document.getElementById("win");
    var evt = (evt) ? evt : ((window.event) ? window.event : "") 
    document.getElementById("title").setCapture(); 
    var win = dragObj; 
    x0 = evt.clientX; 
    y0 = evt.clientY; 
    x1 = parseInt(win.offsetLeft); 
    y1 = parseInt(win.offsetTop); 
    moveable = true; 
} 
//拖动; 
function drag(evt){ 
 if(moveable){ 
  var evt = (evt) ? evt : ((window.event) ? window.event : "")
  var dragObj=document.getElementById("win");
  var win = dragObj;
  document.getElementById("content").innerHTML= evt.clientX;
  win.style.left = x1 + evt.clientX - x0; 
  win.style.top = y1 + evt.clientY - y0; 
 } 
} 
//停止拖动; 
function stopDrag(obj){ 
 if(moveable){ 
  obj.releaseCapture(); 
  moveable = false; 
 } 
} 
</script> 
<body> 
可以了,兄弟,呵呵.累啊!
<div id="win">
<div class="title" id="title" onmousedown="startDrag(event)" onmouseup="stopDrag(this)" onmousemove="drag(event)">窗口1</div>
<div id="content">
现在可以动了.<br>
删了很多代码,自己看看吧.<br>
</div>
</div> 
</body> 
</html>