div拖拽在不同浏览器上效果不同，如何解决？

发布于
2016-05-24

下面四个DIV
在chrome浏览器中可以正常拖拽
在IE浏览器拖拽时后面三个div会跳到第一个div的位置，鼠标不能按在div上拖动
在firefox上拖动不了
如何解决？？？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        position: relative;
    }
    #tzgDiv #tzg1{
        position: absolute;
        left: 0px;
        top: 0px;
    }
    #tzgDiv #tzg2{
        position: absolute;
        left: 400px;
        top: 0px;
    }
    #tzgDiv #tzg3{
        position: absolute;
        left: 800px;
        top: 0px;
    }
    #tzgDiv #tzg4{
        position: absolute;
        left: 1200px;
        top: 0px;
    }
</style>
<script>
//拖动div
window.onload = function(){
    function dragDiv1(s){
    var drags=document.getElementById(s);

drags.onmousedown=function(e){
    e=e||window.event;            //区分IE浏览器
    var xx=e.layerX|| e.offsetX;  //相对当前坐标系的border左上角开始的坐标
    var yy=e.layerY|| e.offsetY;

    document.onmousemove =function(e){
         if(e.srcElement.nodeName != "SELECT"){
        var ev=e||window.event;

        var x=ev.pageX||ev.clientX; //相对整个页面的坐标
        var y=ev.pageY||ev.clientY;
        var tx=x-xx;
        var ty=y-yy;

        var bw= window.innerWidth-drags.offsetWidth;
        var bh= window.innerHeight-drags.offsetHeight;

        if(drags.offsetLeft>=0 && drags.offsetLeft<= bw && drags.offsetTop>=0 && drags.offsetTop<=bh){
            drags.style.left=tx+"px";
            drags.style.top=ty+"px";
        }
        if(drags.offsetLeft<0){
            drags.style.left=0+"px";
        }
        if(drags.offsetLeft>bw){
            drags.style.left=bw+"px";
        }
        if(drags.offsetTop<0){
            drags.style.top=0+"px";
        }
        if(drags.offsetTop>bh){
            drags.style.top=bh+"px";
        }

    }
   }
    document.onmouseup=function(){

        document.onmousemove=null;
        document.onmouseup=null;
    }
}
    }
    dragDiv1("tzg1");   
    dragDiv1("tzg2");
    dragDiv1("tzg3");
    dragDiv1("tzg4");

}

</script>
<body>
    <div id="tzgDiv">
        <div id="tzg1" style="width: 400px; height: 200px; background-color: blue;"></div>
        <div id="tzg2" style="width: 400px; height: 200px; background-color: yellow;"></div>
        <div id="tzg3" style="width: 400px; height: 200px; background-color: green;"></div>
        <div id="tzg4" style="width: 400px; height: 200px; background-color: red;"></div>
        
    </div>
</body>

</html>

javascript css html

html5

阅读 3.2k

3 个回答

guangpunba

<script type="text/javascript">
    //拖动div
    window.onload = function(){
        function dragDiv1(s){
        var drags=document.getElementById(s);
    
    drags.onmousedown=function(e){
        e=e||window.event;            //区分IE浏览器
       // var xx=e.layerX|| e.offsetX;  //相对当前坐标系的border左上角开始的坐标
        //var yy=e.layerY|| e.offsetY;
        var xx = e.clientX-drags.offsetLeft,
            yy = e.clientY-drags.offsetTop;
       /* var dw=document.body.clientWidth;
        var dh=document.body.clientHeight;*/

        //设置捕获范围 //兼容浏览器
      /*  if(drags.setCapture){
            drags.setCapture();
        }else if(window.captureEvents){
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
        }*/

        document.onmousemove =function(e){
            var target = e.target || e.srcElement;
          if(target.nodeName != "SELECT") {
            var ev=e||window.event;

            var x=ev.pageX||ev.clientX; //相对整个页面的坐标
            var y=ev.pageY||ev.clientY;
            var tx=x-xx;
            var ty=y-yy;
console.log(x)
            var bw= window.innerWidth-drags.offsetWidth;
            var bh= window.innerHeight-drags.offsetHeight;

            if(drags.offsetLeft>=0 && drags.offsetLeft<= bw && drags.offsetTop>=0 && drags.offsetTop<=bh){
                drags.style.left=tx+"px";
                drags.style.top=ty+"px";
            }
            if(drags.offsetLeft<0){
                drags.style.left=0+"px";
            }
            if(drags.offsetLeft>bw){
                drags.style.left=bw+"px";
            }
            if(drags.offsetTop<0){
                drags.style.top=0+"px";
            }
            if(drags.offsetTop>bh){
                drags.style.top=bh+"px";
            }
            return false;
          }
        }
       
        document.onmouseup=function(){
            //取消捕获范围   //兼容浏览器
          /*  if(drags.releaseCapture){
                drags.releaseCapture();
            }else if(window.captureEvents){
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
            }*/
            //清除事件
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }
        }
        dragDiv1("tzg1");   
        dragDiv1("tzg2");
        dragDiv1("tzg3");
        dragDiv1("tzg4");

}
      


</script>

shoestrong

12811523

发布于
2016-05-24

IE下,event对象有srcElement属性,但是没有target属性;
Firefox下,event对象有target属性,但是没有srcElement属性;
所以要考虑兼容：e=e.srcElement || e.target
然后判断e.nodeName等不等于SELECT

前端胖头鱼

html

<div>1 no check</div>
<div>2 check</div>
<div>3 no check</div>
<div>4 check</div>

css

html, body{
  margin: 0;
  padding: 0;
}

div{
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: green;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

drag 拖拽函数封装

function drag (ele, isCheck) {

  var css = function  (ele, styles) {
    for(var attr in styles){
      ele['style'][attr] = styles[attr];
    }
  };

  var check = isCheck ? function  (ele) {
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    var h = document.documentElement.clientHeight || document.body.clientHeight;
    var eleW = ele.offsetWidth;
    var eleH = ele.offsetHeight;
    var disX = w - eleW;
    var disY = h - eleH;

    if(ele.offsetLeft < 0){
      css(ele, {
        left: 0
      })
    }

    if(ele.offsetLeft > disX){
      css(ele, {
        left: disX + 'px'
      })
    }

    if(ele.offsetTop < 0){
      css(ele, {
        top: 0
      })
    }

    if(ele.offsetTop > disY){
      css(ele, {
        top: disY + 'px'
      })
    }
  } : undefined;

  var disX,disY,ev;

  ele.onmousedown = function  (e) {
    ev = e || event;
    disX = ev.clientX - this.offsetLeft;
    disY = ev.clientY - this.offsetTop;

    document.onmousemove = function  (e) {
      ev = e || event;

      css(ele, {
        left: ev.clientX - disX + 'px',
        top: ev.clientY - disY + 'px'
      });

      check && check(ele);
    };
    document.onmouseup = function  () {
      this.onmousemove = this.onmouseup = null;
    };

    return false;
  };
};

调用

var eles = [].slice.call(document.querySelectorAll('div'));

eles.forEach(function (e, i) {
  drag(e, i % 2);
})

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

div拖拽在不同浏览器上效果不同，如何解决？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？