百度網盤文件夾框選功能

jkyin 發布于2019-08-29 16:55 / 2613人閱讀

摘要：案例說明使用原生完成桌面操作級應用，對于原生的掌握情況而言，是一個較為全面的綜合型案例。本次課從事件相關的功能入手，給大家帶來詳細的分享。

案例說明：
使用原生 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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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