一．元素尺寸信息
元素.offsetWidth： 元素的外宽高 width + padding + border
元素.offsetHeight： 元素的外宽高 height + padding + border
元素.clientWidth： 元素的内宽高 width + padding
元素.clientHeight： 元素的内宽高 height+ padding
元素.offsetLeft： 相对于定位父元素左则的距离
元素.offsetTop: 相对于定位父元素顶部的距离
window.innerWidth： 浏览器的宽高（包含滚动条）
window.innerHeight： 浏览器显示窗口的当前高（包含滚动条）
document.documentElement.clientWidth || document.body.clientWidth
浏览器的宽高（不包含滚动条）
浏览器显示窗口的内容区宽高
document.documentElement.scrollWidth || document.body.scrollHidth
浏览器的滑动条距离；
document.document.scrollTop || document.body.scrollTop 滚动条滚动距离
#二．事件对象相关位置方法
鼠标距离盒子左上的位置: e.offsetX e.offsetY
鼠标相对于浏览器的位置: e.clientX e.clientY
鼠标相对于页面的位置: e.pageX e.pageY
#三．案例
#1. 单个盒子拖拽
效果图:
功能思路分析:
按下盒子，盒子才能拖。盒子跟随鼠标移动，盒子移动即修改盒子的left和top。松开鼠标停止拖拽。
功能一: 鼠标按下开起拖拽
1. 给要拖拽的元素绑定鼠标按下事件( mousedown )
2. 记录鼠标到盒子的距离**（e.offsetX e.offsetY）**
3. 开启控制盒子移动的变量 ( flag = true )
功能二: 鼠标移动盒子移动
1. 给document绑定**鼠标移动事件 (mousemove),**开关变量为真时移动盒子
2. 盒子位置 = 鼠标到页面的距离( e.pageX ) - 鼠标到盒子的距离( pos.x )
3. 范围判断: 最小为0； 最大 = 页面的宽 - 盒子的宽
4. 修改盒子的left 和 top
功能三: 鼠标松开停止拖拽
松开鼠标时关闭开关变量
#2. 图标回收站
效果图:
功能思路分析:
功能一:图标拖拽
1. 多个图标通过事件委托绑定鼠标按下事件
2. 鼠标按下开启拖拽开关( flag = true )，记录鼠标到图标的距离(e.offsetX e.offsetY ),记录事件源(e.target) 。
3. 图标跟随鼠标移动，给document绑定鼠标移动事件mousemove，当开关变量为真时移动盒子。
功能二:图标回收
1. 当鼠标松开时，关闭拖拽开关
2. 边界判断: 图标进入回收站则删除图标,并计数
#四．今日小结
1.元素的外宽高: 元素.offsetWidth 元素.offsetHeight
2.元素的内宽高: 元素.clientWidth 元素.clientHeight
3.元素相对于定位父元素距离: 元素.offsetLeft 元素.offsetTop
4.鼠标相对于元素位置: e.offsetX e.offsetY
5.鼠标相对于窗口位置: e.clientX e.clientY
6.鼠标相对于页面位置: e.pageX e.pageY
7.浏览器窗口大小:
document.documentElement.clientWidth || document.body.clientWidth
8.滚动距离:
document.documentElement.scrollTop || document.body.scrollTop
#五．作业 -- 成绩分类
效果图:
功能思路分析:
1. 成绩标签拖拽
1. 利用事件委托将左侧的成绩标签实现拖拽
2. 给成绩大盒子绑定鼠标按下事件，判断事件源
3. 给document绑定鼠标移动事件，成绩标签跟随鼠标移动
2. 指定边界判断
1. 给document绑定鼠标松开事件，松开时判断鼠标位置
2. 当鼠标进入成才盒子，再判断成绩，合格则放入；当鼠标进入不成才盒子，不合格则放入。否则回到原地