关于完美拖拽的问题一

1、完美拖拽的思想，具体可以分为：

①计算出鼠标在div的位置，方法为X轴event.clientX-oDiv.offsetLeft;Y轴event.clientY-oDiv.offsetTop;

②计算出鼠标move时候鼠标的X,Y轴，再减去鼠标在div的位置，就是div移动的top和left值

③清除默认事件，ff和chrome可以用return false IE有专用的setCapture() （让本页面所有的事件都集中到一起，例如集中到div上，这样可以防止拖拽的时候文字被选中）记得鼠标释放的时候要releaseCapture()；

④尽量简化代码，把一样的代码放到一个函数里

这样你就做出了一个兼容各种浏览器的完美拖拽代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
  <title>拖拽</title>
  <style>
  *{margin:0;padding:0;}
  #div1{width:100px; height:100px; position:absolute; background:red;cursor:move;overflow:hidden;}
  </style>
  <script>
  window.onload=function(){
    var oDiv=document.getElementById("div1");
    var disX=disY=0;    
    oDiv.onmousedown=function(event){
        var event=event||window.event;
        disX=event.clientX-oDiv.offsetLeft;
        disY=event.clientY-oDiv.offsetTop;
        if(oDiv.setCapture){
            oDiv.onmousemove=move;
            oDiv.onmouseup=up;
            oDiv.setCapture();
            return false;
        }else{
            document.onmousemove=move;
            document.onmouseup=up;
            return false;
        }    
    }
    function move(event){
        var event=event||window.event;
        var l=event.clientX-disX;
        var t=event.clientY-disY;
        if(l<0){
            l=0;
        }else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
            l=document.documentElement.clientWidth-oDiv.offsetWidth;
        }
        if(t<0){
            t=0;
        }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
            t=document.documentElement.clientHeight-oDiv.offsetHeight;
        }
        oDiv.style.left=l+"px";
        oDiv.style.top=t+"px";
    }
    function up(){
        if(oDiv.releaseCapture){
            oDiv.releaseCapture();
        }
        this.onmousemove=null;
        this.onmouseup=null;
    }
  }
  </script>
 </head>
 <body>
    sfdsfcsdjkcjsdkljcksdjfk<br>
    asdjkxcvjixhvjdfjvbdfnvf<br>
    <div id="div1"></div>
 </body>
</html>