太牛了，不错
WEB 前端奥秘探索之旅 - 百度网盘文件夹框选功能
妙味课堂2018-06-29 15:59
公开课：百度网盘文件夹框选功能
案例说明：
使用原生 JS 完成桌面操作级应用，对于原生 JS 的掌握情况而言，是一个较为全面的综合型案例。本次课从事件（event）相关的功能入手，给大家带来详细的分享。
案例相关知识点学习
案例思路流程
页面基本结构及样式
html:
css:
创建文件夹
点击 createBtn 时，创建一个新的 .file 放入 #box 中
文件的鼠标移入移出及选中操作
文件本身是动态创建的，所以在页面加载完成之后去添加事件的话页面上并没有相关元素，但是在文件创建之后在添加事件的话，就需要每次创建完都添加一次事件，为了提高程序的性能，这里我们使用事件代理，把事件统一代理在box上处理
鼠标移入处理: 在鼠标移入之后，判断如果是 .file 就直接 改变 .file 的样式，如果 .file 的子级 就先找到父级 .file 然后再改变样式
点击改变选中状态: 点击时判断是否点击的是 i 标签(模拟的复选框) 是的话，就切换选中状态
鼠标移出：跟鼠标移入一样先找到 .file ，然后找到 .file 下的复选框，判断复选框是否选中，没有选中时，还原 .file 样式
文件的全选和全不选
全选复选框的状态发生改变时，根据复选框状态选中或不选中文件
创建判断是否全选的的函数，在 .file 的 checked 状态改变时，调用这个函数，判断当前是否全选
每次创建文件时，肯定不在是全选了，所以在创建文件后，取消全选状态
文件夹框选操作
鼠标按下时，创建 selection，鼠标移动时改变 selection 大小，鼠标抬起时删除 selection
碰撞检测：获取两个元素的可视区坐标，对比坐标，排除所有不可能碰撞的情况剩下的就是碰撞
鼠标在移动的时候，找到所有 file 依次和 selection 进行碰撞检测，如果碰撞就添加选中状态,否则取消选中状态，然后调用 setCheckedAll() 方法判断是否全选
总结
按照上边步骤我们就可以把网盘的这些基本功能给实现出来，当然在这里边有些点我们可以把它总结出来，也都是常用的一些思路或处理方式
1）事件委托的使用，事件委托可以极大的提高我们的代码性能，尤其是在一些需要频繁更新的视图上, 事件委托不只可以提高性能，也可以精简我们的代码逻辑
2）碰撞检测的思路，碰撞检测这里我们使用了一种排除思路，排除了所有不可能之后，唯一剩余的就碰撞的情况
3）拖拽的思路，用当前位置 - 初始位置得到手指移动距离，另外拖拽在 PC 端最好加给最顶层，否则滑动过快，容易甩掉元素
4）本案例视频及课件获取地址，到本文下方下载附件获取
扩展
这里我们只是实现了云盘最基本的一些功能，云盘本身还有很多功能在里边，比如文件夹的展开，以及文件夹的树形菜单，文件夹位置移动等功能，大家可以自己尝试一下，在官网中我们也有具体的教程>>具体访问 ，大家遇到了什么问题，也欢迎来和我们讨论;
妙味《WEB 前端奥秘探索之旅大型公开课》
上课时间：周二、周四，晚上 8 点
免费报名：https://ke.qq.com/course/178139?tuin=90de623d
公开课内容：各种精彩实战案例 + 知识点测试题。大家可以试着提前完成案例，并自行作答测试题；
周二，讲师分享精彩实战案例，剖析思路、讲解编程技巧、现场演示代码，并随时与大家交流互动。
周四，讲师为大家分解相关测试题、面试题，答疑解惑；
加入妙味学习 QQ 群，获取阶段小测题、各种学习计划安排与相关课件资料~
QQ群号：203404514
免费参加妙味公开课，请联系客服：
- 咨询 QQ：2852509866、2852509868
- 微信咨询：miaov-class、miaov-study
进群方式：关注公众号，发送 “vip进群” 关键字，联系我们加入 VIP 微信学习群
附件下载：
