QQ面板拖拽（慕课网DOM事件探秘）（下）

Posted 2020-10-06 喵嘻嘻

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;
}