js方块拖拽（复杂版）

js封装 方块拖拽（复杂版）

我的主页也有简单的版本

<script>
    var div = document.getElementsByTagName('div')[0];

     //事件监听事件 （自己封装的函数 解决不同浏览器兼容性问题）
     function addEvent(elem,type,fn){
        if(elem.addEventListener){
            elem.addEventListener(type,fn)
        }else{
            elem.attachEvent('on'+ type ,fn);
        }
    }

    //取消事件冒泡（自己封装的函数  解决不同浏览器兼容性问题）
    function stopBubble(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }

    //取消默认事件（自己封装的函数 解决不同浏览器兼容性问题）
    function cancelHander(event){
        if(event.preventDefault){
            event.preventDefault();
        }else if(event.returnValue){
            event.returnValue = false;
        }else{
            return false;
        }
    }

    //获得元素属性值（自己封装的函数 解决不同浏览器兼容性问题）
    function getStyle(elem,prop){
        if(window.getComputedStyle){
            return window.getComputedStyle(elem,null)[prop];
        }else{
            return elem.currentStyle[prop];
        }
    }


    //拖拽函数 drag
    function drap(elem){
        var disX,
            disY;
        
        function mouseMove (e){
            var event = e|| window.event;               //解决event(事件) 在不同浏览器的兼容性问题 

            elem.style.left = event.pageX -disX +"px";  //调整方块的left值  
            //-disX 是为了使鼠标不会在一点击就在原地而不是一点击鼠标，方块的左上角就立刻定位到鼠标上
            
            elem.style.top = event.pageY -disY +"px";  //需要elem函数  函数不独立在drag外
        }

        function mouseUp(){
            document.removeEventListener('mousemove',mouseMove);
        }

        /* 函数点击事件为前提条件，才会触发接下来的鼠标移动事件和鼠标松开事件  */
        addEvent(elem,'mousedown',function mouseDown(e){
            var e = e || window.event;                               //解决event(事件) 在不同浏览器的兼容性问题 

            disX = e.pageX - parseInt(getStyle(elem,'left'));       //disX 为鼠标x轴位置到方块的最左边的距离
            disY = e.pageY - parseInt(getStyle(elem,'top'));

            addEvent(document,'mousemove',mouseMove);       //增加鼠标移动事件
            addEvent(elem,'mouseup',mouseUp);                //增加鼠标松开事件

            stopBubble(e);              //取消冒泡
            cancelHander(e);             //取消默认
        });
    }

    
    drap(div);
</script>