问答详情
源自:4-2 [DOM事件] QQ面板拖拽效果(下)

求解为什么拖动无反应

跟随视频写到11分钟左右 测试失败
报错信息:
Uncaught TypeError: Cannot read property 'offsetTop' of null
    at HTMLDivElement.fnDown (drag.js:26)
    
源码:
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;
}

window.onload = drag;

function drag() {
    var oTitle = getByClass('login_logo_webqq', 'loginPanel')[0];
    oTitle.onmousedown = fnDown;
}

function fnDown(event) {
    event = event || window.event;
    var oDrag = document.getElementById('loginPane1'),
        //  光标按下时光标和面板之间的距离 相对XY
        disX = event.clientX - oDrag.offsetLeft,
        disY = event.clientY - oDrag.offsetTop;
    //  移动
    document.onmousemove = function (event) {
        event = event || window.event;
        fnMove(event, disX, disY);
    }
}

function fnMove(e, posX, posY) {
    var oDrag = document.getElementById('loginPane1'),
        l = e.clientX - posX,
        t = e.clientY - posY;
    oDrag.style.left = l + 'px';
    oDrag.style.top = t + 'px';
}


提问者:慕雪2062911 2018-04-10 16:15

个回答

  • qq_long妹_0
    2018-04-11 22:59:09
    已采纳

     disX = event.clientX - oDrag.offsetLeft,  这一句应该以分号结尾,不是逗号。