js下 Day10、尺寸位置属性

一．元素尺寸信息

元素.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. 当鼠标进入成才盒子，再判断成绩，合格则放入；当鼠标进入不成才盒子，不合格则放入。否则回到原地