发新贴  快速回复

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 微信学习群

附件下载:
 
小白同学

 太牛了,不错

2018-07-08 03:58  回复本帖
妙味-小仙
2018-07-16 11:50  回复本帖
小兽医

不错

2018-09-27 09:31  回复本帖
pthssadf

2019-02-23 21:01  回复本帖
pthssadf
2019-03-20 13:13  回复本帖
深红5

666

2019-05-25 12:37  回复本帖
融入

1

2019-12-24 20:36  回复本帖
妙味用户692188

棒棒哒

2020-02-24 19:25  回复本帖
jle197

2020-10-17 14:54  回复本帖
妙味用户327429

 

邦Q24329791

为什么我在亚博赢了钱不让我提现到底是什么原因?

 

网站方都有哪些借口:你的账户异常登录、注单异常、风控、网站维护、提不了现,提款不到账,提不了款 网站出款端口维护、账户涉嫌套利、系统自动抽查审核、网站抽查审核、账户违规下注、银行系统维护等等借口不给你出款甚至冻结你账户。不要抱着侥幸,这些都是网站已经准备黒你所找的理由。 

遇到不给提款难题咨询Q24329791挽回损失..V信:Pu2911

被坑得朋友在和客服了解问题的时候客服基本上都会以各种审核,或者维护等借口敷衍,他们这种做法就是把你拖得没耐心了,然后你瞎玩全部输掉。 

 


1. 被黒不要和客服理论,(如果您盈利,款额巨大,请一定要记住!你一直的纠缠只会导致被封号,而且客服会找各种理由拖延时间,找理由推脱) 
2. 平台一旦出现提款不到账系统维护,正在审核,这些都是平台百分之百不给你了! 
3. 黒你有两种,一种冻结,一种说维护,维护这种可以正常游戏的,就是不给下分,这种类似得可以找我,因为平台很希望说在维护期间你能把分全部输回去。 
4. 24小时出不了就说明黒你了,网上被黑怎么办这时候千万不要乱说话或者一直拖着,第一时间找我们,及时止损,最后拖的时间长了就会冻结账户,也不要自己乱操作导致我们都无法帮你,到时候后悔就晚了。 
5. 不要抱有希望,遇到这些情况不要去找客服理论。  既然已经决定黑你就不会给你,只会一堆理由推脱你。 
6. 保证自己的账号能正常登陆而且账号内可以进行积分转换!然后找相关专业出黒人员,通过技术手段藏分的方式把分提现出来! 
7. 发现不能提可以通过藏分的手段把被黒的分数化整为零。就是把一个游戏上的分转换到其它的多个.......游戏上,然后在慢慢分批的提出,注意次数和金额要适当,一旦被发现账户就会被冻结,冻结后就再无办法了。       

 

 

 

2021-09-17 10:07  回复本帖
登录 后才可以发表回复