可以移动的层(Div)兼容IE和firefox浏览器

    技术2022-05-11  19

    可以移动的层(Div)兼容IE和firefox浏览器

    <html><head>   <title>移动Div</title>   <style type="text/css" rel="stylesheet">    #movediv{     width:100px;height:100px;position:absolute;border:1px solid #000;background:#EAEAEA;     cursor:pointer;     text-align:center;     line-height:100px;     left:100px;     top:10px;    }   </style>   <script language="javascript" type="text/javascript">    var _IsMousedown = 0;    var _ClickLeft = 0;    var _ClickTop = 0;    function moveInit(divID,evt)    {     _IsMousedown = 1;     if(getBrowserType() == "NSupport")     {      return;     }     var obj = getObjById(divID);     if(getBrowserType() == "fox")     {      _ClickLeft = evt.pageX - parseInt(obj.style.left);      _ClickTop = evt.pageY - parseInt(obj.style.top);     }else{      _ClickLeft = evt.x - parseInt(obj.style.left);      _ClickTop = evt.y - parseInt(obj.style.top);     }    }    function Move(divID,evt)    {     if(_IsMousedown == 0)     {      return;     }     var objDiv = getObjById(divID);     if(getBrowserType() == "fox")     {      objDiv.style.left = evt.pageX - _ClickLeft;      objDiv.style.top = evt.pageY - _ClickTop;     }     else{      objDiv.style.left = evt.x - _ClickLeft;      objDiv.style.top = evt.y - _ClickTop;     }        }    function stopMove()    {     _IsMousedown = 0;    }    function getObjById(id)    {     return document.getElementById(id);    }    function getBrowserType()    {     var browser=navigator.appName     var b_version=navigator.appVersion     var version=parseFloat(b_version)     //alert(browser);     if ((browser=="Netscape"))     {      return "fox";     }     else if(browser=="Microsoft Internet Explorer")     {      if(version>=4)      {       return "ie4+";      }      else      {       return "ie4-";      }     }     else     {      return "NSupport";     }    }   </script></head><body>   <div id="movediv" style="left:20px;top:20px;" οnmοusedοwn="moveInit('movediv',event);" οnmοusemοve="Move('movediv',event)" οnmοuseup="stopMove()" οnmοuseοut="stopMove()">move</div></body></html>

    为防止再次被移除js代码,我将body中内容列出!<div>move</div>上面的div的属性和事件有:id="movediv"style="left:20px;top:20px;"οnmοusedοwn="mouseInit('movediv',event);"οnmοusemοve="Move('movediv',event)"οnmοuseup="stopMove()"οnmοuseοut="stopMove()"

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"><!--.drag{position:absolute;width:200px; background-color:green;height:120px;z-index:1;}.da{width:100%;height:20px;background-color:black;color:white;cursor:move;}.x{float:right;color:red;cursor:pointer;}--></style></head>

    <body><div class="drag" rel="drag" id="drag1" style="left:30px;top:10px;" οnmοusedοwn="dargit(this,event);">    <div class="da" ><span class="x">x</span>拖动区1.</div>    文字1</div><script type="text/javascript">var ey=0,ex=0,lx=0,ly=0,canDrg=false,thiso=null;//var x, y,rw,rh;var divs=document.getElementsByTagName("div");for (var i=0;i<divs.length;i++){      if(divs[i].getAttribute("rel")=="drag"){       divs[i].οnmοusemοve=function(){       thismove(this);//实时得到当前对象与鼠标的值以判断拖动及关闭区域;    }     }}

    function thismove(o){      rw=parseInt(x)-parseInt(o.style.left);      rh=parseInt(y)-parseInt(o.style.top);document.title=rw+"=文本区域="+rh;      if(rh<=20 && rw>=180)document.title=rw+"||20*20||"+rh;//右上角20*20的关闭区域if(rh<=20 && rw<180 )document.title=rw+"||可选||"+rh;//绝对拖动条选择区域;}function dargit(o,e){thiso = o;canDrg = true;if(!document.all){        lx = e.clientX; ly = e.clientY;        }else{          lx = event.x; ly = event.y;     }if(document.all) thiso.setCapture();    st(o);//置前或置后

    }

    document.onmousemove = function(e){if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }if(canDrg){      //if(rh<=20 && rw<180 ){//如果要设定拖动区域可以作判断var ofsx = x - lx;thiso.style.left = parseInt(thiso.style.left) + ofsx;lx = x;var ofsy = y - ly;thiso.style.top = parseInt(thiso.style.top) + ofsy;ly = y;//}else{canDrg=false;}}}

    document.οnmοuseup=function(){       canDrg=false;//拖拽变量设为false       if(document.all && thiso != null){        //ie下,将清捕获;           thiso.releaseCapture();        thiso = null;     }}

    function set(obj){       obj=obj.parentNode.parentNode;       if(obj.getAttribute("rel"));      //obj.style.zIndex=1;    }function st(o){

    var p = o.parentNode;if(p.lastChild != o){    p.appendChild(o);}

    if(rh<=20 && rw>=180){canDrg=false;//如果选择的是关闭区域;      window.status=rw+"|"+rh;      if(p.firstChild == o) return;      p.insertBefore(o, p.firstChild);          }}

    </script>

    </body></html>


    最新回复(0)