百度网盘文件夹框选功能

2018-10-11 admin

clipboard.png

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

案例相关知识点学习

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

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

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

案例思路流程 页面基本结构及样式 html:

clipboard.png

css:

clipboard.png

创建文件夹 点击 createBtn 时,创建一个新的 .file 放入 #box 中

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

文件夹框选操作 鼠标按下时,创建 selection,鼠标移动时改变 selection 大小,鼠标抬起时删除 selection

clipboard.png

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

clipboard.png

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

clipboard.png

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

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

原文链接:https://segmentfault.com/a/1190000016649638

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42425.html

文章标题:百度网盘文件夹框选功能

相关文章
JavaScript获取本周周一,周末及获取任意时间的周一周末功能示例
本文实例讲述了JS获取本周周一,周末及获取任意时间的周一周末功能。分享给大家供大家参考,具体如下: 项目需要获取本周及任意一天的周一及周末 需格式化,示例代码如下: <!DOCTYPE html PUBLIC "-&#x2F...
2017-03-17
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能。分享给大家供大家参考。具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击“运行代码”后的效果,使用时,你只需将需要运行...
2017-03-27
JavaScript分页功能的实现方法
本文实例讲述了JavaScript分页功能的实现方法。分享给大家供大家参考。具体实现方法如下: <script> //定义page为全局变量,以便下面使用 var page; window.onload = ...
2017-03-22
利用VUE框架,实现列表分页功能示例代码
先来看一下效果图: 功能描述: 1. 点击页面序号跳转到相应页面; 2. 点击单左/单右,向后/向前跳转一个页面; 3. 点击双左/双右,直接跳转到最后一页/第一页; 4. 一次显示当前页面的前三个与后三个页面; 5. 始终显示最后一...
2017-03-11
javascript实现百度地图鼠标滑动事件显示、隐藏
其实现思路是给label设置样式,我们来看下具体做法吧 var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)}); label.setS...
2017-03-22
对JavaScript的全文搜索实现相关度评分的功能的方法
全文搜索,与机器学习领域其他大多数问题不同,是一个 Web 程序员在日常工作中经常遇到的问题。客户可能要求你在某个地方提供一个搜索框,然后你会写一个类似 WHERE title LIKE %:query% 的 SQL 语句实现搜索功能。一开...
2017-03-24
JavaScript实现滑动到页面底部自动加载更多功能
话不多说,请看代码: //滚动条到页面底部加载更多案例 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); /&#x2F...
2017-03-17
原生js实现新闻列表展开/收起全文功能
知识要点 1.实现原理很简单,通过点击a标签设置div的display属性隐藏或者显示, 主要是对dom操作的掌握。 2.需要用到的dom操作: parentNode 获取父级元素 nextSibling获取下一个紧跟的节点 previou...
2017-02-27
javascript常用功能汇总
1.javascript的数组API: //定义数组 var pageIds = new Array(); pageIds.push('A'); 数组长度 pageIds.length; &...
2017-03-27
JavaScript简单表格编辑功能实现方法
本文实例讲述了JavaScript简单表格编辑功能实现方法。分享给大家供大家参考。具体如下: <html> <head> <script type="text/javascript&quot...
2017-03-22
回到顶部