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; width:500;}
.winTitle{ position:absolute; border-bottom:1px solid black; background-color: background; width:100%; height:20px; cursor:move;}
.winContent{ position:absolute; top:30px; width: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><!--parentNode指文档层次中的父对象,event指被触发的这个事件对象-->
<div class="winContent">
内容
</div>
</div>
</BODY>
</HTML>
<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; width:500;}
.winTitle{ position:absolute; border-bottom:1px solid black; background-color: background; width:100%; height:20px; cursor:move;}
.winContent{ position:absolute; top:30px; width: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><!--parentNode指文档层次中的父对象,event指被触发的这个事件对象-->
<div class="winContent">
内容
</div>
</div>
</BODY>
</HTML>
