IE、FireFox兼容的拖动DIV

最新推荐文章于 2020-11-30 21:24:42 发布

xcyxl

最新推荐文章于 2020-11-30 21:24:42 发布

阅读量889

点赞数

文章标签： firefox ie microsoft function javascript internet

<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>