基于原生 Js 编写的百度云盘项目

项目介绍

• 类似云盘的项目，文件夹增删改查、无限极菜单。

项目目录

• js_baiduyunpan
  • font
  • ico
  • css
  • image
  • js
  • index.html

静态布局

• 页面头部区域

  • 新建文件夹
  • 删除
  • 移动到

• 页面内容区域

  • 树状菜单
  • 文件夹
    • 右键点击
    • 移动
    • 删除
    • 重命名
  • 导航

• 弹窗

  • 成功
  • 失败

• 双击名字重命名

• 框选

• 遮罩层

项目逻辑

• 找到自己，子级，父级，所有父级，所有子级

• 三大视图渲染

  • 路径导航
    • 当前项
    • 所有父级
  • 文件夹
    • 文件勾选
    • 文件名
  • 树菜单
    • 三角图标打开关闭状态
    • 文件图标关闭打开状态
    • 层级缩进

• 三大视图切换（data-id）

  • 利用事件委托
  • 给每个元素加上ID
  • 视图切换后，勾选消失

• 新建文件夹

  • 新建文件夹后全选
  • 新建文件夹命名排序

• 弹窗

  • 成功弹窗
  • 警告弹窗

• 鼠标右键显示菜单

  • 阻止右键菜单
    • 滚轮消失
    • 窗口大小变化消失
    • 不是文件夹区域消失
  • 范围限制

• 删除（removeData）

  • 删除弹窗
  • 单文件删除
  • 框选批量删除
  • 删除成功弹窗
  • 右上角关闭

• 移动（moveData）

  • 单文件移动
  • 框选批量移动
  • 树菜单数据显示
  • 右上角关闭
  • 移动成功弹窗
  • 移动后显示当前内容
  • 文件夹移动到子级问题
  • 文件夹名字重名问题

• 重命名

  • 焦点
  • 框选
  • 区域限制
  • 批量删除
  • 删除后全选勾选问题
  • 批量移动
  • 文件夹移动到子级问题
  • 文件夹名字重名问题
  • 双击文件重命名

讨论

欢迎分享共同做一个技术交流。