一个实现拖拽效果的js小demo报错的问题

跟着网上的这篇教程做的一个拖拽效果,教程传送门
但是在chrome里运行时总是报错:

先贴上代码:

myDragDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyDragDemo</title>
    <style type="text/css">
        #box{
            position : absolute;
            left : 100px;
            top : 100px;
            padding : 5px;
            background : lightblue;
            font-size : 15px;
            -moz-box-shadow : 2px 2px 4px grey;
            -webkit-box-shadow : 2px 2px 4px grey;
        }
        #main{
            border : 2px solid green;
            background: yellowgreen;
        }
        #bar{
            line-height : 30px;
            background : purple;
            border-bottom : 2px solid pink;
            padding-left : 5px;
            cursor : move;
        }
        #content{
            width: 400px;
            height: 150px;
            padding: 10px 5px;
        }
    </style>

    <script type="text/javascript" src = './myMovePlugin.js'></script>
    <script type="text/javascript">
        var obar = document.getElementById('bar');
        var oTarget = document.getElementById('box');
        myDrag(obar,oTarget);
    </script>
</head>
<body>
    <div id="box">
        <div id="main">
            <div id="bar">Drag</div>
            <div id="content">Content</div>
        </div>
    </div>
</body>
</html>

myMovePlugin.js:

var params = {
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false
};

var getCss = function(o, key) {
    return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};

var myDrag = function(bar, target) {
    params.left = getCss(bar,'left');
    params.top = getCss(bar,'top');

    bar.onmousedown = function (e) {
        params.flag = true;
        if (!e) {
            e = window.event;
        }
        //防止IE文字被选中
        bar.onselectstart = function () {
            return false 
        }

        var e = event;
        params.currentX = e.ClientX;
        params.currentY = e.ClientY;
    };

    bar.onmouseup = function (e) {
        params.flag = false;
        params.left = getCss(bar,'left');
        params.top = getCss(bar,'top'); 
    };

    bar.onmousemove = function (e) {
        var e = event? event : window.event;
        if (params.flag) {
            var nowX = e.ClientX, nowY = e.ClientY;
            var disX = nowX - params.currentX, disY = nowY - params.currentY;
            target.style.left = parseInt(params.left) + disX + 'px';
            target.style.top = parseInt(params.top) + disY + 'px';
        }
    }

}

我对比了下，代码应该和教程里面的一样，没有什么问题呀，为什么教程里的可以正常执行，我的就会报错呢？谁能帮我看看么？感谢哦=￣ω￣=

html稍作调整：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyDragDemo</title>
    <style type="text/css">
        #box{
            position : absolute;
            left : 100px;
            top : 100px;
            padding : 5px;
            background : lightblue;
            font-size : 15px;
            -moz-box-shadow : 2px 2px 4px grey;
            -webkit-box-shadow : 2px 2px 4px grey;
        }
        #main{
            border : 2px solid green;
            background: yellowgreen;
        }
        #bar{
            line-height : 30px;
            background : purple;
            border-bottom : 2px solid pink;
            padding-left : 5px;
            cursor : move;
        }
        #content{
            width: 400px;
            height: 150px;
            padding: 10px 5px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="main">
            <div id="bar">Drag</div>
            <div id="content">Content</div>
        </div>
    </div>
    
    <script type="text/javascript" src = './myMovePlugin.js'></script>
    <script type="text/javascript">
        var obar = document.getElementById('bar');
        var oTarget = document.getElementById('box');
        myDrag(obar,oTarget);
    </script>
</body>
</html>

浏览器解析html代码至dom时是从上至下的解析，执行该js时未查询到该dom，该问题是查询dom为null。
问题非常基础，又是一个伪码农；
不建议楼上的回答方式，导致整个提问水平太捉急；

【热门文章】