关于e.clientX/e.clientY、ele.offsetHeigt/ele.offsetWidth、offsetx/offsety的区别以及拖拽函数

关于e.clientX/e.clientY、ele.offsetHeigt/ele.offsetWidth、ele.offsetTop/ele.offsetLeft、offsetx/offsety的区别
　在学习运动的时候，对于以上的这四种属性一直都是模棱两可，处于混淆的状态，今天好好加以解释，
１　e.clientX/e.clientY　比较简单表示鼠标在滑动的时候在浏览器可是窗口的坐标（纯数字　没有ｐｘ）
２　ele.offsetHeigt/ele.offsetWidth　表示ｄｏｍ元素的宽和高（盒模型）（纯数字　没有ｐｘ）
３　ele.offsetTop/ele.offsetLeft　表示dom元素的定位坐标（纯数字　没有ｐｘ）
4 e.offsetx/e.offsety 表示鼠标在触发事件元素时在该元素上的坐标（纯数字　没有ｐｘ）

通过以上的讲解 这里实现一个最简单的拖拽函数
废话不多说 上代码

function(){
var box=document.getElementById(“box”);
var x=null;
var y=null;
box.function(e){
x=e.offsetX;
y=e.offsetY;
document.function(e){
box.style.left=e.clientX-x+“px”;
box.style.top=e.clientY-y+“px”;
}
}
document.function(){
document.null;
}
}

标签：clientX,clientY,function,box,ele,document
来源： https://blog.csdn.net/weixin_43414945/article/details/88842589