javascript - 一个实现拖拽效果的js小demo报错的问题-PHP中文网问答

跟着网上的这篇教程做的一个拖拽效果,教程传送门
但是在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>
    <p id="box">
        <p id="main">
            <p id="bar">Drag</p>
            <p id="content">Content</p>
        </p>
    </p>
</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';
        }
    }

}

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

<!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> <p id="box"> <p id="main"> <p id="bar">Drag</p> <p id="content">Content</p> </p> </p> <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>