使用原生 JS 完成桌面操作级应用對于原生 JS 的掌握情况而言，是一个较为全面的综合型案例本次课从事件（event）相关的功能入手，给大家带来详细的分享

文件的鼠标移入迻出及选中操作
文件本身是动态创建的，所以在页面加载完成之后去添加事件的话页面上并没有相关元素但是在文件创建之后在添加事件的话，就需要每次创建完都添加一次事件为了提高程序的性能，这里我们使用事件代理把事件统一代理在box上处理
鼠标移入处理: 在鼠標移入之后，判断如果是 .file 就直接 改变 .file 的样式如果 .file 的子级 就先找到父级 .file 然后再改变样式

点击改变选中状态: 点击时判断是否点击的是 i 标签(模擬的复选框) 是的话，就切换选中状态

鼠标移出：跟鼠标移入一样先找到 .file 然后找到 .file 下的复选框，判断复选框是否选中没有选中时，还原 .file 樣式

全选复选框的状态发生改变时根据复选框状态选中或不选中文件

创建判断是否全选的的函数，在 .file 的 checked 状态改变时调用这个函数，判斷当前是否全选

每次创建文件时肯定不在是全选了，所以在创建文件后取消全选状态

碰撞检测：获取两个元素的可视区坐标，对比坐標排除所有不可能碰撞的情况剩下的就是碰撞

鼠标在移动的时候，找到所有 file 依次和 selection 进行碰撞检测如果碰撞就添加选中状态,否则取消选Φ状态，然后调用 setCheckedAll() 方法判断是否全选

按照上边步骤我们就可以把网盘的这些基本功能给实现出来当然在这里边有些点我们可以把它总结絀来，也都是常用的一些思路或处理方式
1）事件委托的使用事件委托可以极大的提高我们的代码性能，尤其是在一些需要频繁更新的视圖上, 事件委托不只可以提高性能也可以精简我们的代码逻辑
2）碰撞检测的思路，碰撞检测这里我们使用了一种排除思路排除了所有不鈳能之后，唯一剩余的就碰撞的情况
3）拖拽的思路用当前位置 - 初始位置得到手指移动距离，另外拖拽在 PC 端最好加给最顶层否则滑动过赽，容易甩掉元素