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

最新推荐文章于 2024-04-30 23:41:08 发布

sahusoft

最新推荐文章于 2024-04-30 23:41:08 发布

阅读量1.3k

点赞数

文章标签： firefox div ie function browser stylesheet

本文链接：https://blog.csdn.net/sahusoft/article/details/4408024

版权

可以移动的层(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">

</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);//实时得到当前对象与鼠标的值以判断拖动及关闭区域;
    }
     }
}

}

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>

sahusoft

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可以移动的层(Div)兼容IE和firefox浏览器

可以移动的层(Div)兼容IE和firefox浏览器移动Div #movediv{ width:100px;height:100px;position:absolute;border:1px solid #000;background:#EAEAEA; cursor:pointer; text-align:center; line-height
复制链接

扫一扫