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

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

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

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;
}
}

上一篇:点击事件的坐标计算(client || offset) +(X || Width || Left) 各种排列组合别绕晕


下一篇:图形化设置数据库规则