求解为什么拖动无反应

来源:4-2 [DOM事件] QQ面板拖拽效果(下)

慕雪2062911

2018-04-10 16:15

跟随视频写到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';
}


写回答 关注

1回答

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

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

    慕雪2062...

    谢谢你,但不是因为这个,oDrag定义时L打了1

    2018-04-12 14:00:11

    共 1 条回复 >

DOM事件探秘

DOM事件?本课程会通过实例来给小伙伴们讲解如何使用这些事件

99533 学习 · 1207 问题

查看课程

相似问题