DOM-9 【鼠标行为坐标系-pageXY封装-拖拽函数封装】

一.鼠标行为坐标系

-clientX/Y

鼠标位置相对于当前可视区域的坐标(不包括滚动条的距离)

-x/y

同clientX/Y相同 FF不支持

-pageX/Y

鼠标位置相对于当前文档的坐标(包含滚动条的距离) IE9以下不支持(jquery新定义)

-layerX/Y

同pageX/Y相同，IE11以下同clientX/Y

-screenX/Y

鼠标位置相对于屏幕的坐标

-offsetX/Y

鼠标位置相对于块元素的坐标(包含边框，safari不包括边框)

二.pageXY封装

function pagePos(e){
    var sLeft = getScrollOffset().left,
        sTop = getScrollOffset()top,
        cLeft = document.documentElement.clientLeft || 0,
        cTop = document.documentElement.clientTop || 0;
        return {
            X:e.clientX + sLeft - cLeft,
            Y:e.clientY + sTop - -cTop
            }
}

三.拖拽函数封装

function movePlate(elem){
    var x,
        y;
    attachEvent(elem,'mousedown',function(e){
        var e=e||window.event;
        x =pagePos(e).x-parseInt(getStyles(elem,'left'));
        y =pagePos(e).y-parseInt(getStyles(elem,'top'));
        attachEvent(document,'mousemove',mouseMove);
        attachEvent(document,'mouseup',mouseUp);
         removeBubble(e);
         preventDefaultEvent(e);
    },false);
   function mouseMove(e){
    var e = e||window.event;
    console.log(x);
    elem.style.left=pagePos(e).x-x+'px';
    elem.style.top=pagePos(e).y-y+'px';
   }
   function mouseUp(e){
    var e=e||window.event;
    removeEvent(document,'mousemove',mouseMove,false);
    removeEvent(document,'mouseup',mouseUp,false);
   }

}
function pagePos(e){
    var sLeft=getScrollOffset().left,
        sTop=getScrollOffset().top,
        oLeft=document.documentElement.clientLeft || 0,
        oTop=document.documentElement.clientTop|| 0;
    return {
        x:e.clientX+sLeft-oLeft,
        y:e.clientY+sTop-sLeft
    }
}