js的窗口坐标及拖拽

var oDiv = document.querySelector('div');
oDiv.onclick = function(e){
    //获取对象内容左上角坐标
    var x= e.offsetX;
    var y = e.offsetY;
    console.log(x,y);
    //获取视窗创就坐标
    var CX = e.clientX;
    var CY = e.clientY;
    console.log(CX,CY);
    获取Html文档，左上角的坐标
    var PX = e.pageX;
    var PX = e.pageY;
    console.log(PX,PY);
    console.log(e);
}

var oDiv = document.querySelector('div')
//
var oDivHeight = oDiv.offsetHeight;
var oDivWidth = oDiv.offsetWidth;
window.onclick = function(e){
    //给定位重新赋值，让定位中top和left的值发生改变，从而达到改变div位置
    // 在原始数值的基础上,再减去定位标签,宽高的一半
    oDiv.style.left = e.clientX - oDiv.offsetWidth/2 + 'px';
    oDiv.style.top = e.clientY -oDiv.offsetHeight/2 + 'px';
}

// 拖拽的效果
// 当鼠标按下,并且鼠标移动时发生位移事件
//获取div标签
var oDiv = document.querySelector('div');
// 在div移动之前,先记录原始的定位数据
var oldTop = window.getComputedStyle(oDiv).top;
var oldLeft = window.getComputedStyle(oDiv).left;

// 当鼠标按下时,鼠标移动,添加事件
window.onmousedown = function(){
    //console.log('鼠标按下');
    window.onmousemove = function(e){
        //console.log('鼠标滑动');
        // 将鼠标的坐标,作为div定位的数值,定位的是中心的位置
        oDiv.style.left = e.clientX - oDiv.offsetWidth/2 + 'px' ;
        oDiv.style.top = e.clientY - oDiv.offsetHeight/2 + 'px' ;
    }
}
// 当鼠标抬起时,鼠标移动,赋值null,就没有事件执行了，如果去掉这个函数，只要鼠标点过html，且还在html页面上，div就跟着移动即使没有点击div，也会跟着移动
window.onmouseup = function(){
//鼠标只要一抬起，失去移动效果
    window.onmousemove = null;
    // 可以再给div定义,定位位置,可以返回原始位置
    // 也在函数之外,记录存储原始位置
    oDiv.style.left = oldLeft;
    oDiv.style.top = oldTop;
}