百度网盘文件夹框选功能

jkyin 发布于2019-08-29 16:55 / 2600人阅读

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

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

案例相关知识点学习

原生DOM操作 >> https://study.miaov.com/study...

原生Event事件 >> https://study.miaov.com/study...

ES6相关语法 >> https://study.miaov.com/study...

案例思路流程
页面基本结构及样式
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 端最好加给最顶层，否则滑动过快，容易甩掉元素

更多素材在这里哟~~https://study.miaov.com/bbs?c...

云服务器 GPU云服务器百度网盘bt文件怎么打开百度网盘百度网盘优势百度网盘cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113987.html

百度网盘和阿里云盘哪个有优势百度盘短期不可替代

摘要：那今天就来谈谈百度网盘和阿里云盘到底相互之间的竞争，是不是会对百度网盘有所影响。而且目前阿里云盘还没有真正纳入阿里云体系下。毕竟百度网盘通过这么多年的发展，拥有的数据量和用户量，短期还是不可能被替代的。实际上关于互联网网盘、云盘的竞争一直没有停止过，早年我们知道的115、百度、360等平台都有相继在个人和企业云盘市场竞争，最终能被个人接纳且一直发展较好的百度网盘。而且这几年的发展我们很多个人...

i_garfileo 2021-09-10 11:22 评论0 收藏0
个人云盘：阿里云无影，百度网盘、腾讯微云争霸？

摘要：马太效应加剧，百度网盘的第一之位定会越来越稳，唯一能够威胁百度网盘的只有腾讯微云。一般来说市场份额的大小决定着企业在市场中的话语权，在个人云盘行业马太效应加强情况下，百度网盘与腾讯微云的话语权得到进一步提升。热闹是你们的，我什么都没有，用来形容当前的个人云盘行业最为贴切。云服务行业有无数资本搭台，和许多企业唱戏，好不热闹。市场调研公司Wikibon发布了2018年云市场回顾以及2019展望报...

hot_pot_Leo 2019-04-29 17:49 评论0 收藏0
【云极高性能计算 EPC】操作指南：安装步骤及大文件下载指南

摘要：主机内置免费的网盘加速功能，百度网盘超级会员。百度网盘对非超级会员限制下载速度操作指南，登录主机。，选择需要下载的大文件资源，下载速度可达。下载速度文件大小小时小时下载成本下载文件，若使用主机的带宽，单次下载所需的流量费用为元。VASP软件官网：[www.vasp.at]安装步骤安装依赖包yum -y install cmake pkgconfig yum groupinstall Deve...

Tecode 2022-06-28 19:00 评论0 收藏0
百度网盘9周年活动：百度网盘SVIP年卡只要178元

摘要：百度网盘周年活动火爆进行中原价元的百度网盘将以周年特惠价元开售，直降百元以上。现在，百度网盘已经开启周年活动开始了，可以直接抢购点击进入百度网盘周年活动本届百度网盘周年庆，百度网盘价会不会迎来新低，我们拭目以待。百度网盘9周年活动火爆进行中!原价298元的百度网盘SVIP将以9周年特惠价178元开售，直降百元以上。现在，百度网盘已经开启9周年活动开始了，可以直接抢购! 点击进入：百度网...

snowell 2021-11-24 10:23 评论0 收藏0
老蒋在用的坚果云盘适合私有文档和文件管理备份支持跨平台

摘要：这篇文章中，老蒋介绍在我自己也在使用的一款付费坚果云盘，在众多免费网盘云盘横行的时代，很多人会认为付费云盘肯定没有生存空间。同时，老蒋还会用到同步备份文档密码库。老蒋并没有将重要的账户信息备份在上面，还是有些担心安全问题的。老蒋在前面的文章中有提到阿里云盘、百度云盘，在这几天已经看不到阿里云盘火热的讨论。实际上，无论是哪个服务商的软件，都固然有一定的用户，但是最终选择的，能长期坚持下来使用的...

JohnLui 2021-09-27 14:01 评论0 收藏0