原生js实现对某一个结点的拖拽

// HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于  HTMLElement.offsetParent 节点的左边界偏移的像素值。
// HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。
// MouseEvent.clientX 是只读属性， 它提供事件发生时的应用客户端区域的水平坐标 (与页面坐标不同)。
window.onload = function(){
     
    var box = document.getElementById("box");
    box.onmousedown = function(e){
     
        var e = e || window.event;
        var diffX = e.clientX - box.offsetLeft;
        var diffY = e.clientY - box.offsetTop;
        document.onmousemove = function(e){
     
            var e = e || window.event;
            box.style.left = e.clientX - diffX + "px";
            box.style.top = e.clientY - diffY + "px";
        };
        document.onmouseup = function(){
     
        document.onmousemove = null;
        document.onmousedown = null;
        };
    };

};