js实现div在页面中的拖动

大家都知道，ＱＱ面板可以在我们的桌面上随意拖动，那今天我们来做一个可以在浏览器中拖动的效果。

html代码很简单:

<div id="div1"></div> 就这样一句话

css效果:

#div1{
        width: 200px;
        height: 200px;
        border:1px solid #f00;
        position: relative;
        top: 50px;
        left: 50px;
    }

js代码:

 window.οnlοad=s4_drag;
    function s4_drag(){
    var div1=document.getElementById("div1");
    div1.οnmοusedοwn=s4_down;
    }
    function s4_down(event){
    var div1=document.getElementById("div1");
        event=event||window.event;
        var disX=event.clientX-div1.offsetLeft;
        var disY=event.clientY-div1.offsetTop;
        document.οnmοusemοve=function(event){
            event=event||window.event;
            s4_move(event,disX,disY);
        }
        document.οnmοuseup=function(){
            document.οnmοusemοve=null;
        }
    }
    function s4_move(event,x1,y1){
        event=event||window.event;
    var div1=document.getElementById("div1"),
        l=event.clientX-x1,
        t=event.clientY-y1,
        winW=document.documentElement.clientWidth||document.body.clientWidth,
        winH=document.documentElement.clientHeight||document.body.clientHeight,
        maxW=winW-div1.offsetWidth,
        maxH=winH-div1.offsetHeight;
        if(l<0){
            l=0;
        }else if(l>maxW-15){
            l=maxW-15;
        }
        if(t<0){
            t=0;
        }else if(t>maxH-15){
            t=maxH-15;
        }
        div1.style.left=l+"px";
        div1.style.top=t+"px";
        
    }

代码思路是这样的，当页面加载好以后，执行s4_drag函数，当我们鼠标点击div的时候，这时候记录了我们鼠标按下的点到浏览器最左边的距离，以及我们的div到浏览器最左边的距离，两者相减，便是鼠标点的位置到div边缘的距离，因为我们的div在页面中的拖动是根据鼠标的位置来确定的，因此我们鼠标点的x坐标减去之前求出来的距离就是我们鼠标划过多少距离的数值，这样做的好处是保证当我们点击div时，鼠标在div中的哪位位置，那么结束鼠标移动后，两者之间的相对位置不会改变。最后面的l、t两个则是让div在移动的时候，不会移动到浏览器的外面。

这里面有几个知识点是我之前不了解的，整理如下:

event=event||window.event有什么用，为什么很多函数都在这里加上这么一句话？

这其实是在做浏览器的兼容问题，在IE8之前的浏览器中，是不承认event对象的，那就如果没有这句话，这个效果在IE8以及之前版本的浏览器中就无法实现拖拉的效果，另外我之前写的时候，写的是简写的e，而不是event，结果发现在FF中是无法运行的，看来浏览器兼容问题除了万恶的IE外，还有一个FF也是挺骚气的。刚好前两天自己看了一个event对象的兼容问题，等过两天分享出来。

event.clientX是什么意思？

event.clientX：鼠标相对于浏览器内容的平位移量，而该参照点会随着滚动条的移动而移动（没有px，因为它返回的是一个数值）

div1.offsetLeft是什么意思？

是获取相对于父元素的左边距（没有px，因为它返回的是一个数值）

div1.style.left=l+"px"是什么意思？

表示设置div1到浏览器左边的距离（返回的是一个字符串）

 style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left

还有一点：

document.body是DOM中Document对象里的body节点， document.documentElement是文档对象根节点(html)的引用

页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。

这么做的目的简单的来说就是为了兼容。