2.鼠標事件坐標獲取

function fnDown(event) {
    var event = event || window.event;
    var oDrag = document.getElementById("loginPanel");
    //光標按下時光標和面板之間的距離；
    var disX = event.clientX - oDrag.offsetLeft;
    var disY = event.clientY - oDrag.offsetTop;
    //移動
    document.onmousemove = function (event) {
        event 
 
= event || window.event;
        fnMove(event, disX, disY);
    };
    document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}
function fnMove(event, posX, posY) {
    var oDrag = document.getElementById("loginPanel");
    var l = event.clientX - posX;
    
 
var t = event.clientY - posY;
    var winW = document.documentElement.clientWidth;
    var winH = document.documentElement.clientHeight;
    var maxW = winW - oDrag.offsetWidth - 10;
    var maxH = winH - oDrag.offsetHeight;
    //當l=0時，窗口不能繼續外移
    if (l < 0) {
        l = 0;
    } else if (l > maxW) {
        l 
 
= maxW;
    }

    if (t < 10) {
        t = 10;
    } else if (t > maxH) {
        t = maxH;
    }

    oDrag.style.left = l + "px";
    oDrag.style.top = t + "px";
}

3.封裝各瀏覽器通用的getElementsByClassName()方法

方法返回的是一個數組，切記

function getByClass(clsName, parent) {
    var oParent = parent ? document.getElementById(parent) : document,
        eles = [],
        elements = oParent.getElementsByTagName(‘*‘);

    for (var i = 0, l = elements.length; i < l; i++) {
        if (elements[i].className == clsName) {
            eles.push(elements[i]);
        }
    }
    return eles;
}

QQ面板拖拽（慕課網DOM事件探秘）（下）