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

预览

html

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

css

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

p{
  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('p'));

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

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

<script type="text/javascript">
    //拖动p
    window.onload = function(){
        function dragp1(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;
        }
    }
        }
        dragp1("tzg1");   
        dragp1("tzg2");
        dragp1("tzg3");
        dragp1("tzg4");

}
      


</script>