原生JS拖拽Element Node

上周四晚上数梦工场笔试，其中有一道题目考察原生JS拖拽元素节点，我以为是用onmouseover事件实现，实则要更复杂些，其中的一些代码接口我就更谈不上熟悉了

我查阅了网上的资料，找到一种比较简单的写法（虽然原来版本是错误的，当然被我修正了），给出代码:

<div id='box' style="width:100px;height:100px;background-color:red;position: relative">
<!-- 被拖拽node的position必须为relative,fixed or absolute-->
    可拖动div元素
</div>

<script type="text/javascript">
    var oDiv=document.getElementById('box');
    oDiv.onmousedown=function(ev){
        ev=ev?ev:window.event;
        var disX=ev.clientX-oDiv.offsetLeft;
        var disY=ev.clientY-oDiv.offsetTop;

        oDiv.onmousemove=function(ev){
            var l=ev.clientX-disX;
            var t=ev.clientY-disY;

            oDiv.style.left=parseInt(l)+'px';
            oDiv.style.top=parseInt(t)+'px';
//            console.log("l="+l);
//            console.log("t="+t);

        };
        oDiv.onmouseup=function(){
//            console.log("up");
            oDiv.onmousemove=null;
            oDiv.onmouseup=null；
        //如果不想移动，则需要注销上述两个事件
        }
    }
</script>

环境
浏览器：chrome.版本 58.0.3029.81 (64-bit)

如果要了解offsetTop和offsetLeft两个属性，则可以这篇博客：
http://blog.csdn.net/xiebaochun/article/details/38382169