<html>
<head>
<title>javascript拖动DIV</title>
<meta http-equiv="Content-Type" Content="text/html;charset=utf-8"/>
<style type="text/css">
body{
font-family:Verdana;
font-size:11px;
color:#333;
}
#win1{
position:absolute;
left:100;
top:100;
height:150px;
border:1px solid #000;
}
.title{
background-color:black;
height:18px;
color:white;
cursor: move;
}
</style>
</head>
<script type="text/javascript">
var move=false;
window.οnlοad=function(){
if(navigator.appName=='Netscape'){
obj=document.getElementById("win1").firstChild;
obj.addEventListener("mousedown",StartDrag,true);
obj.addEventListener("mousemove",Drag,true);
obj.addEventListener("mouseup",StopDrag,true);
}else if(navigator.appName=='Microsoft Internet Explorer'){
obj=document.getElementById("win1").firstChild;
obj.attachEvent("onmousedown",StartDrag);
obj.attachEvent("onmousemove",Drag);
obj.attachEvent("onmouseup",StopDrag);
}
}
function StartDrag(event){
if(event.currentTarget){
obj=event.currentTarget;
}else if(event.srcElement){
obj=event.srcElement;
}
obj.style.background="#999";
move=true;
}
function Drag(event){
if(move){
if(event.currentTarget){
obj=event.currentTarget;
}else if(event.srcElement){
obj=event.srcElement;
}
var oldwin=obj.parentNode;
oldwin.style.left=event.clientX-100;
oldwin.style.top=event.clientY-10;
}
}
function StopDrag(event){
if(event.currentTarget){
obj=event.currentTarget;
}else if(event.srcElement){
obj=event.srcElement;
}
obj.style.background="#000";
move=false;
}
</script>
<body>
<div id="win1"><div class="title">窗口</div>This is a moveable window.<br>Moreinfo in</div>
</body>
</html>
<head>
<title>javascript拖动DIV</title>
<meta http-equiv="Content-Type" Content="text/html;charset=utf-8"/>
<style type="text/css">
body{
font-family:Verdana;
font-size:11px;
color:#333;
}
#win1{
position:absolute;
left:100;
top:100;
height:150px;
border:1px solid #000;
}
.title{
background-color:black;
height:18px;
color:white;
cursor: move;
}
</style>
</head>
<script type="text/javascript">
var move=false;
window.οnlοad=function(){
if(navigator.appName=='Netscape'){
obj=document.getElementById("win1").firstChild;
obj.addEventListener("mousedown",StartDrag,true);
obj.addEventListener("mousemove",Drag,true);
obj.addEventListener("mouseup",StopDrag,true);
}else if(navigator.appName=='Microsoft Internet Explorer'){
obj=document.getElementById("win1").firstChild;
obj.attachEvent("onmousedown",StartDrag);
obj.attachEvent("onmousemove",Drag);
obj.attachEvent("onmouseup",StopDrag);
}
}
function StartDrag(event){
if(event.currentTarget){
obj=event.currentTarget;
}else if(event.srcElement){
obj=event.srcElement;
}
obj.style.background="#999";
move=true;
}
function Drag(event){
if(move){
if(event.currentTarget){
obj=event.currentTarget;
}else if(event.srcElement){
obj=event.srcElement;
}
var oldwin=obj.parentNode;
oldwin.style.left=event.clientX-100;
oldwin.style.top=event.clientY-10;
}
}
function StopDrag(event){
if(event.currentTarget){
obj=event.currentTarget;
}else if(event.srcElement){
obj=event.srcElement;
}
obj.style.background="#000";
move=false;
}
</script>
<body>
<div id="win1"><div class="title">窗口</div>This is a moveable window.<br>Moreinfo in</div>
</body>
</html>