案例说明：使用原生JS完成桌面操作级应用，是一个比较全面全面的掌握原生JS的案例。本课从事件相关的功能入手，为大家带来详细的分享。案例相关知识点学习原生DOM操作>>https://study.miaov.com/study...原生Event事件>>https://study.miaov.com/study...ES6相关语法>>https://study.miaov.com/study...caseideaflow页面基本结构和样式html:css:创建文件夹点击createBtn时，新建一个.file，放到#box中，鼠标移动进去andout选择文件文件本身是动态创建的，所以如果在页面加载后添加事件，页面上没有相关元素，但是如果在文件创建后添加事件，则需要添加每次创建一个事件，为了提高程序的性能，这里我们使用事件代理来处理事件统一代理对框的鼠标移入处理：鼠标移入后，如果是判断为.file，则直接更改.file的样式，如果找到.file的child，则先找到parent.file然后更改样式，点击更改选中状态：点击时，判断点击的是否是第i个标签（模拟复选框）如果是，则切换选中状态鼠标移出：找到.复选框，判断复选框是否被选中，如果没有被选中，恢复.file样式文件的checkall和uncheckall复选框。是否全选的函数，当.checked状态时。方框操作当鼠标按下时，创建一个选区，当鼠标移动时，改变选区的大小，当鼠标抬起时，删除选区即当鼠标移动时，找到所有一个一个地选择文件并执行碰撞检测。如果有碰撞，则添加选中状态，否则取消选中状态，然后调用setCheckedAll()方法判断是否全部选中。总结按照上面的步骤，我们就可以把网盘的这些基本功能实现了。当然，我们可以在这里总结一些要点，也是一些常用的思路或者处理方法。1）事件委托的使用，事件委托可以极大的提升我们的代码性能，尤其是在一些需要频繁的场合在updatedview上，eventdelegation不仅可以提升性能，还可以简化我们的代码逻辑2）collisiondetection的思路，collisiondetection这里我们使用了一种exclusion的方法，排除掉所有不可能的之后，只剩下collision了情况3）拖动的思路是利用当前位置-初始位置得到手指的移动距离。另外，在PC端拖拽的时候最好加在顶层，否则滑动太快，容易甩掉元素。更多资料在这里~~https://study.miaov.com/bbs?c...
