原生JS实现拖拽效果-兼容IE

原生JavaScript实现拖拽效果，要用到三个事件：onmousedown、onmousemove、onmouseup；而且使用有一定的顺序，不能用错；详细的在代码中解释。

基本样式：要让元素绝对定位，脱离文档流，方便拖拽。

#box{
    position:absolute;
    cursor:pointer;
    width:100px;
    height:100px;
    background:#f00;
}

js代码：

window.onload = function(){
            var box = document.getElementById('box');
            box.onmousedown=function(e){

                e = e || window.event;
                //点击时，鼠标距离元素左 上的距离
                var boxLeft = e.clientX - box.offsetLeft;//e.clientX:鼠标距离文档左边的距离  box.offsetLeft:元素距离左边的距离
                var boxTop = e.clientY - box.offsetTop;
　　　　　　　　　　//setCapture()/releaseCapture()这两个方式是IE特有的，可以捕获鼠标滑动到窗口外的事件
                if(typeof box.setCapture == 'object'){
                    //IE 
                  13                     box.onmousemove=mouseMove;
                    box.onmouseup=mouseUp;
                    box.setCapture();
                }else{
                    window.onmousemove = mouseMove;
                    window.onmouseup = mouseUp;    
                }
                
            

                function mouseMove(e){
                    e = e || window.event;
                    //计算元素记录文档的左，上的距离
                    var L = e.clientX - boxLeft;
                    var T = e.clientY - boxTop;

                    if(L <= 0){
                        //超出左边界
                        L = 0;
                    }else if(L > document.documentElement.clientWidth - box.offsetWidth){
                        //超出右边界
                        L = document.documentElement.clientWidth - box.offsetWidth;
                    }

                    if(T <= 0){
                        //超出上边界
                        T = 0;
                    }else if(T > document.documentElement.clientHeight - box.offsetHeight){
                        //超出下边界
                        T = document.documentElement.clientHeight - box.offsetHeight;
                    }

                    box.style.left = L +"px";
                    box.style.top = T + "px";
                }

                function mouseUp(){
                    if(typeof box.releaseCapture == 'object'){
                        //IE 
                        box.releaseCapture();
                    }
                    
                    this.onmousemove = null;
                    this.onmouseup = null;
                }

            }
        }