上週四晚上數夢工場筆試，其中有一道題目考察原生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)