百度網(wǎng)盤文件夾框選功能

jkyin 發(fā)布于2019-08-29 16:55 / 2601人閱讀

摘要：案例說明使用原生完成桌面操作級(jí)應(yīng)用，對于原生的掌握情況而言，是一個(gè)較為全面的綜合型案例。本次課從事件相關(guān)的功能入手，給大家?guī)碓敿?xì)的分享。

案例說明：
使用原生 JS 完成桌面操作級(jí)應(yīng)用，對于原生 JS 的掌握情況而言，是一個(gè)較為全面的綜合型案例。本次課從事件（event）相關(guān)的功能入手，給大家?guī)碓敿?xì)的分享。

案例相關(guān)知識(shí)點(diǎn)學(xué)習(xí)

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

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

ES6相關(guān)語法 >> https://study.miaov.com/study...

案例思路流程
頁面基本結(jié)構(gòu)及樣式
html:

css:

創(chuàng)建文件夾
點(diǎn)擊 createBtn 時(shí)，創(chuàng)建一個(gè)新的 .file 放入 #box 中

文件的鼠標(biāo)移入移出及選中操作
文件本身是動(dòng)態(tài)創(chuàng)建的，所以在頁面加載完成之后去添加事件的話頁面上并沒有相關(guān)元素，但是在文件創(chuàng)建之后在添加事件的話，就需要每次創(chuàng)建完都添加一次事件，為了提高程序的性能，這里我們使用事件代理，把事件統(tǒng)一代理在box上處理
鼠標(biāo)移入處理: 在鼠標(biāo)移入之后，判斷如果是 .file 就直接改變 .file 的樣式，如果 .file 的子級(jí) 就先找到父級(jí) .file 然后再改變樣式

點(diǎn)擊改變選中狀態(tài): 點(diǎn)擊時(shí)判斷是否點(diǎn)擊的是 i 標(biāo)簽(模擬的復(fù)選框) 是的話，就切換選中狀態(tài)

鼠標(biāo)移出：跟鼠標(biāo)移入一樣先找到 .file ，然后找到 .file 下的復(fù)選框，判斷復(fù)選框是否選中，沒有選中時(shí)，還原 .file 樣式

文件的全選和全不選
全選復(fù)選框的狀態(tài)發(fā)生改變時(shí)，根據(jù)復(fù)選框狀態(tài)選中或不選中文件

創(chuàng)建判斷是否全選的的函數(shù)，在 .file 的 checked 狀態(tài)改變時(shí)，調(diào)用這個(gè)函數(shù)，判斷當(dāng)前是否全選

每次創(chuàng)建文件時(shí)，肯定不在是全選了，所以在創(chuàng)建文件后，取消全選狀態(tài)

文件夾框選操作
鼠標(biāo)按下時(shí)，創(chuàng)建 selection，鼠標(biāo)移動(dòng)時(shí)改變 selection 大小，鼠標(biāo)抬起時(shí)刪除 selection

碰撞檢測：獲取兩個(gè)元素的可視區(qū)坐標(biāo)，對比坐標(biāo)，排除所有不可能碰撞的情況剩下的就是碰撞

鼠標(biāo)在移動(dòng)的時(shí)候，找到所有 file 依次和 selection 進(jìn)行碰撞檢測，如果碰撞就添加選中狀態(tài),否則取消選中狀態(tài)，然后調(diào)用 setCheckedAll() 方法判斷是否全選

總結(jié)
按照上邊步驟我們就可以把網(wǎng)盤的這些基本功能給實(shí)現(xiàn)出來，當(dāng)然在這里邊有些點(diǎn)我們可以把它總結(jié)出來，也都是常用的一些思路或處理方式
1）事件委托的使用，事件委托可以極大的提高我們的代碼性能，尤其是在一些需要頻繁更新的視圖上, 事件委托不只可以提高性能，也可以精簡我們的代碼邏輯
2）碰撞檢測的思路，碰撞檢測這里我們使用了一種排除思路，排除了所有不可能之后，唯一剩余的就碰撞的情況
3）拖拽的思路，用當(dāng)前位置 - 初始位置得到手指移動(dòng)距離，另外拖拽在 PC 端最好加給最頂層，否則滑動(dòng)過快，容易甩掉元素

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