div标题栏拖动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.winFrame{ position:absolute; border: outset gray 1px; height:400; 500;}
.winTitle{ position:absolute; border-bottom:1px solid black; background-color: background; 100%; height:20px; cursor:move;}
.winContent{ position:absolute; top:30px; 100% padding: 10px; overflow: auto;}
</style>
<SCRIPT LANGUAGE="JavaScript">
function beginDrag(elem,event){
var deltaX = event.clientX - parseInt(elem.style.left);
var deltaY = event.clientY - parseInt(elem.style.top);
document.attachEvent("onmousemove",moveHandler);//attachEvent()为注册事件
document.attachEvent("onmouseup",upHandler);
event.cancelBubble = true;//阻止事件冒泡
event.returnValue = false;//令返回值等于空
function moveHandler(e){
if(!e)
    e = window.event;
    elem.style.left = (e.clientX - deltaX) + "px";
    elem.style.top = (e.clientY - deltaY) + "px";
    e.cancelBubble = true;
}
function upHandler(e){
if(!e)
    e = window.event;
    document.detachEvent("onmousemove",moveHandler);
    document.detachEvent("onmouseup",upHandler);
    e.cancelBubble = true;
}
}
</SCRIPT>
</HEAD>
<BODY>
     <div class="winFrame" style="left:50px;top:50px;">
         <div class="winTitle" onMouseDown="beginDrag(this.parentNode,event);"> 标题 </div>
      <div class="winContent">
        内容
         </div>
     </div>
</BODY>
</HTML>