├── image ├── cloud.png ├── copy.png ├── disk.png ├── error.png ├── file.png ├── gouzi.png ├── move.png ├── paper.png ├── pic │ ├── 1.jpg │ └── timg.jpg ├── show.png ├── shut.png ├── sort.png ├── succ.png ├── user.png ├── addfile.png ├── ccircle.png ├── chatico.png ├── delete.png ├── diskico.png ├── diskico1.png ├── fileshow.png ├── headico.png ├── message.png ├── rename.png ├── search.png ├── select.png ├── setico.png ├── showmenu.png ├── upload.png ├── useico1.png ├── userico.png ├── 循环 (1).png ├── circlegrey.png ├── columStyle.png ├── diskhover.png ├── rub_circle.png ├── userhover.png ├── userico24.png ├── addfilehover.png ├── defaultStyle.png ├── deletehover.png ├── filecanshow.png ├── littlepaper.png ├── recycle │ └── file.png ├── renamehover.png ├── rubblishico.png ├── selecthover.png └── uploadhover.png ├── screen_shot ├── 回收站.gif ├── 复制移动.gif ├── 布局转换.gif ├── 拖拽移动.gif ├── 添加删除.gif └── 进入文件夹.gif ├── README.md ├── script ├── data.js ├── view.js ├── main.js └── tool.js ├── index.html ├── recycle.html └── style └── main.css /image/cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/cloud.png -------------------------------------------------------------------------------- /image/copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/copy.png -------------------------------------------------------------------------------- /image/disk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/disk.png -------------------------------------------------------------------------------- /image/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/error.png -------------------------------------------------------------------------------- /image/file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/file.png -------------------------------------------------------------------------------- /image/gouzi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/gouzi.png -------------------------------------------------------------------------------- /image/move.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/move.png -------------------------------------------------------------------------------- /image/paper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/paper.png -------------------------------------------------------------------------------- /image/pic/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/pic/1.jpg -------------------------------------------------------------------------------- /image/show.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/show.png -------------------------------------------------------------------------------- /image/shut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/shut.png -------------------------------------------------------------------------------- /image/sort.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/sort.png -------------------------------------------------------------------------------- /image/succ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/succ.png -------------------------------------------------------------------------------- /image/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/user.png -------------------------------------------------------------------------------- /image/addfile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/addfile.png -------------------------------------------------------------------------------- /image/ccircle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/ccircle.png -------------------------------------------------------------------------------- /image/chatico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/chatico.png -------------------------------------------------------------------------------- /image/delete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/delete.png -------------------------------------------------------------------------------- /image/diskico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/diskico.png -------------------------------------------------------------------------------- /image/diskico1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/diskico1.png -------------------------------------------------------------------------------- /image/fileshow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/fileshow.png -------------------------------------------------------------------------------- /image/headico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/headico.png -------------------------------------------------------------------------------- /image/message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/message.png -------------------------------------------------------------------------------- /image/pic/timg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/pic/timg.jpg -------------------------------------------------------------------------------- /image/rename.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/rename.png -------------------------------------------------------------------------------- /image/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/search.png -------------------------------------------------------------------------------- /image/select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/select.png -------------------------------------------------------------------------------- /image/setico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/setico.png -------------------------------------------------------------------------------- /image/showmenu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/showmenu.png -------------------------------------------------------------------------------- /image/upload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/upload.png -------------------------------------------------------------------------------- /image/useico1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/useico1.png -------------------------------------------------------------------------------- /image/userico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/userico.png -------------------------------------------------------------------------------- /image/循环 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/循环 (1).png -------------------------------------------------------------------------------- /image/circlegrey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/circlegrey.png -------------------------------------------------------------------------------- /image/columStyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/columStyle.png -------------------------------------------------------------------------------- /image/diskhover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/diskhover.png -------------------------------------------------------------------------------- /image/rub_circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/rub_circle.png -------------------------------------------------------------------------------- /image/userhover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/userhover.png -------------------------------------------------------------------------------- /image/userico24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/userico24.png -------------------------------------------------------------------------------- /screen_shot/回收站.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/screen_shot/回收站.gif -------------------------------------------------------------------------------- /screen_shot/复制移动.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/screen_shot/复制移动.gif -------------------------------------------------------------------------------- /screen_shot/布局转换.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/screen_shot/布局转换.gif -------------------------------------------------------------------------------- /screen_shot/拖拽移动.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/screen_shot/拖拽移动.gif -------------------------------------------------------------------------------- /screen_shot/添加删除.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/screen_shot/添加删除.gif -------------------------------------------------------------------------------- /image/addfilehover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/addfilehover.png -------------------------------------------------------------------------------- /image/defaultStyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/defaultStyle.png -------------------------------------------------------------------------------- /image/deletehover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/deletehover.png -------------------------------------------------------------------------------- /image/filecanshow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/filecanshow.png -------------------------------------------------------------------------------- /image/littlepaper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/littlepaper.png -------------------------------------------------------------------------------- /image/recycle/file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/recycle/file.png -------------------------------------------------------------------------------- /image/renamehover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/renamehover.png -------------------------------------------------------------------------------- /image/rubblishico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/rubblishico.png -------------------------------------------------------------------------------- /image/selecthover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/selecthover.png -------------------------------------------------------------------------------- /image/uploadhover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/image/uploadhover.png -------------------------------------------------------------------------------- /screen_shot/进入文件夹.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloforrestworld/Wangpan-/HEAD/screen_shot/进入文件夹.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 微云总结 2 | 3 | [预览][1] 4 | 标签（空格分隔）： 微云 5 | 6 | [TOC] 7 | ## 截图 8 | > 9 | ![添加删除][2] 10 | ![进入文件夹][3] 11 | ![复制移动][4] 12 | ![拖拽移动][5] 13 | ![回收站][6] 14 | ![布局转换][7] 15 | ##功能分析 16 | 17 | 1. 点击文件夹 18 | >>选中： 19 | >>>1单击文件夹选中文件夹（取消其他文件夹选择），单击图片打开图片; 20 | >>>2点击云盘空白地方取消所有选择; 21 | >>>3.多选:Ctrl+鼠标点击 选中多个文件; 22 | 2. 全选功能键 23 | 3. 新建文件夹 24 | >>点击新建文件夹按钮弹出新文件夹并要求输入名字. 25 | >>>--添加成功： 检测名字没有重复，通过==>数据交互; 26 | >>>--添加失败：名字重复了，移除元素节点; 27 | 28 | 4. 重命名 29 | >> + 重命名按钮和直接点击文件名称都能调出重命名. 30 | >> + 能否重命名？ 31 | >>> 当选中的是一个文件的时候可以重命名. 32 | >>> 没有选中或选择了多个文件重不能重命名. 33 | >> + 确认重命名 34 | >>> + 鼠标失去焦点或者按回车键，确认重命名. 35 | >>> + 检测新名字是否重复 重复则失败，否则命名成功. 36 | 37 | 5. 删除功能 38 | >> + 确认：移动到回收站. 39 | >> + 取消：取消删除. 40 | 6. 布局转换 41 | >>文件竖排列，并多了一些文件信息项. 42 | 7. 搜索功能 43 | >>>搜索本文件目录下的文件 如果找到文件名称变黄色，点击文件名称取消样式 44 | 8. 菜单功能 45 | 1.菜单弹出: 46 | * 鼠标在文件身上调出菜单: 47 | + 弹出:删除、重命名、移动到、复制、粘贴 48 | + 该文件默认被选中，可以进行相关操作 49 | * 当在空白地方调出: 50 | + 弹出:新建、上传(没添加)、粘贴 51 | * 当在回收站调出: 52 | + 弹出:删除、重命名、移动到 53 | 54 | 55 | 56 | 2.菜单新增功能: 57 | * 移动到:弹出移动位置选择框 58 | + 判断能否移动： 59 | -失败: 移动到 本目录、自身子目录 60 | 61 | * 复制:复制当前文件选中的文件 62 | * 粘贴:粘贴到当前文件夹 63 | * 小细节: 64 | 1.移动和粘贴重名问题： 65 | + 弹出选择框 66 | + 选择框内容: 67 | a.有几个文件重名了，分别是哪些 68 | b.可以分别对文件进行不同操作(覆盖、新建副本、忽略) 69 | c.确定操作、或取消移动 70 | 71 | 2.副本名字规则: 72 | + 一个文件副本 ：文件1(1),文件1(2),文件1(3); 73 | + 如果删除文件1(2),下次覆盖 出来的还是文件1(2); 74 | + 如果用户本身建立了文件1(4),那么下次覆盖自动建立的副本则是文件1(4); 75 | 76 | 9.其他功能: 77 | * 鼠标画框可以选中文件 78 | * 拖动文件 79 | - 拖动一个或者多个，可直接拖进文件夹内 80 | - 拖动到目录，可自动打开目录，松手则移动到该文件内 81 | 82 | * 回收站: 83 | - 删除:直接删除数据; 84 | - 移动：可还原文件; 85 | - 清空回收站:回收站 所有文件清除 86 | ##小总结 87 | ###问题: 88 | 1.移动判断 是否移动到自己子集 只能循环递归？ 89 | >点击的时候先将拿到的id push到数组里面 然后循环那个数组也可以 90 | 91 | 2.新建副本名字规则怎么做更好？ 92 | >找到要覆盖的文件，在文件后面加(1)。 93 | 循环当前目录,如果重名了(1+1)。 94 | 递归循环，直到没有重复。 95 | ###注意: 96 | 1.变量挂载 到自身属性上 97 | 2.尽可能少的全局变量 98 | 3.选中的时候先push到一个数组里面 确定删除 重名命的时候才与数据交互 99 | 4.事件管理: 100 | > a.分析好事件确切是什么时候发生的,是down还是up,不要全都写click 101 | b.动作完成，清除相关事件，例如画框时，鼠标抬起后，清除mouseup,mousemove 102 | c.尽量用Dom2级事件 103 | 104 | 5.代码函数化: 105 | >把一些需要实现的功能划分成一个个函数 106 | 107 | ###难点: 108 | >//生成目录结构 109 | //如何对数据复制（深拷贝） 110 | //移动和粘贴如何 找到重复项 并且 整理添加到弹出框内 111 | //删除数据函数 112 | //根据class找父级的递归 113 | //新建副本起名规则 114 | //自定义的确认框基本做不到阻塞代码的运行 115 | 116 | ###比较烦: 117 | >//在不同位置 生成不同的菜单 118 | //当移动或者复制 名字重复的时候 弹出所有重复项的处理框 119 | 120 | 121 | [1]: http://www.hasakei66.com:3004/ 122 | [2]: https://helloforrestworld.github.io/wangpan/screen_shot/%E6%B7%BB%E5%8A%A0%E5%88%A0%E9%99%A4.gif 123 | [3]: https://helloforrestworld.github.io/wangpan/screen_shot/%E8%BF%9B%E5%85%A5%E6%96%87%E4%BB%B6%E5%A4%B9.gif 124 | [4]: https://helloforrestworld.github.io/wangpan/screen_shot/%E5%A4%8D%E5%88%B6%E7%A7%BB%E5%8A%A8.gif 125 | [5]: https://helloforrestworld.github.io/wangpan/screen_shot/%E6%8B%96%E6%8B%BD%E7%A7%BB%E5%8A%A8.gif 126 | [6]: https://helloforrestworld.github.io/wangpan/screen_shot/%E5%9B%9E%E6%94%B6%E7%AB%99.gif 127 | [7]: https://helloforrestworld.github.io/wangpan/screen_shot/%E5%B8%83%E5%B1%80%E8%BD%AC%E6%8D%A2.gif -------------------------------------------------------------------------------- /script/data.js: -------------------------------------------------------------------------------- 1 | var user_data = { 2 | "maxId":11, 3 | "0":{ 4 | "name":"根目录", 5 | "id":0, 6 | "type":"folder", 7 | "childrenId":[{'id':1},{'id':2},{'id':6},{'id':7}] 8 | }, 9 | "1":{ 10 | "name":"框架", 11 | "id":1, 12 | "pId":0, 13 | "type":"folder", 14 | "childrenId":[{'id':3},{'id':4}] 15 | }, 16 | "2":{ 17 | "name":"Html5", 18 | "id":2, 19 | "pId":0, 20 | "type":"folder", 21 | "childrenId":[] 22 | }, 23 | "3":{ 24 | "name":"React", 25 | "id":3, 26 | "pId":1, 27 | "type":"folder", 28 | "childrenId":[] 29 | }, 30 | "4":{ 31 | "name":"Vue", 32 | "id":4, 33 | "pId":1, 34 | "type":"folder", 35 | "childrenId":[{'id':5}] 36 | }, 37 | "5":{ 38 | "name":"Vue-ci", 39 | "id":5, 40 | "pId":4, 41 | "type":"folder", 42 | "childrenId":[] 43 | }, 44 | "6":{ 45 | "name":"妹子's", 46 | "id":6, 47 | "pId":0, 48 | "type":"img", 49 | "src":"./image/pic/timg.jpg", 50 | "childrenId":[] 51 | }, 52 | "7":{ 53 | "name":"妹子", 54 | "id":7, 55 | "pId":0, 56 | "type":"img", 57 | "src":"./image/pic/1.jpg", 58 | "childrenId":[] 59 | }, 60 | //回收站数据 61 | "8":{ 62 | "name":"回收站", 63 | "id":8, 64 | "type":"folder", 65 | "childrenId":[{'id':9}] 66 | }, 67 | "9":{ 68 | "name":"框架", 69 | "id":9, 70 | "pId":8, 71 | "type":"folder", 72 | "childrenId":[{'id':10},{'id':11}] 73 | }, 74 | "10":{ 75 | "name":"Html5", 76 | "id":10, 77 | "pId":9, 78 | "type":"folder", 79 | "childrenId":[] 80 | }, 81 | "11":{ 82 | "name":"React", 83 | "id":11, 84 | "pId":9, 85 | "type":"folder", 86 | "childrenId":[] 87 | }, 88 | }; 89 | 90 | 91 | var data_menu = { 92 | "creat":{ 93 | "name":"新建文件夹", 94 | "click":function(){ 95 | addFile.onclick(); 96 | }, 97 | "background":'url(./image/addfile.png)2px 14px no-repeat', 98 | "background-size":'16%' 99 | }, 100 | "del":{ 101 | "name":"删除", 102 | "click":function(){ 103 | delFile.onclick(); 104 | }, 105 | "background":'url(./image/delete.png)4px 20px no-repeat', 106 | "background-size":'12%' 107 | }, 108 | "rename":{ 109 | "name": "重命名", 110 | "click":function(){ 111 | rename.onclick(); 112 | }, 113 | "background":'url(./image/rename.png)4px 20px no-repeat', 114 | "background-size":'12%' 115 | }, 116 | "moveto":{ 117 | "name":"移动到", 118 | "click":function(){ 119 | var listShowBtns = listShow.querySelectorAll('.listBtn button'); 120 | listShowBtns[0].innerHTML = '移动'; 121 | 122 | listShow.classList.add('active'); 123 | listShowBox.innerHTML = creatList(data[0]); 124 | 125 | listClick(listShowBox); //添加点击事件 126 | 127 | //模糊 128 | filter(true); 129 | }, 130 | "background":'url(./image/move.png)4px 20px no-repeat', 131 | "background-size":'12%' 132 | }, 133 | "copyto":{ 134 | "name":"复制", 135 | "click":function(){ 136 | copy(); 137 | }, 138 | "background":'url(./image/copy.png)4px 20px no-repeat', 139 | "background-size":'12%' 140 | }, 141 | "paste":{ 142 | "name":"粘贴", 143 | "click":function(){ 144 | paste(); 145 | }, 146 | "background":'url(./image/copy.png)4px 20px no-repeat', 147 | "background-size":'12%' 148 | }, 149 | "upload":{ 150 | "name":"上传文件", 151 | "click":function(){ 152 | message('succ',"功能还没添加") 153 | }, 154 | "background":'url(./image/upload.png)4px 18px no-repeat', 155 | "background-size":'12%' 156 | } 157 | } 158 | 159 | -------------------------------------------------------------------------------- /script/view.js: -------------------------------------------------------------------------------- 1 | 2 | //根据数据渲染文件夹 3 | function creatFiles(data,file){ 4 | var str = ``,i,len = data.length; 5 | var turn = file.classList.contains('colum')?true:false; 6 | for(i=0;i 8 |
10 |
11 | ${data[i].name} 12 | 13 |
${turn?`
${data[i].type}
`:``} 14 | ` 15 | }; 16 | return str; 17 | }; 18 | 19 | //生成导航面包削 20 | function creatNavs(data,isRec){ 21 | var str = ``,i,len = data.length; 22 | 23 | if(len === 1){ 24 | return str = `${isRec?'回收站':'根目录'}`; 25 | } 26 | 27 | str = `返回上一级 |`; 28 | for(i = 0; i${data[i].name}`; 31 | 32 | if(i!==len-1) str+='>'; 33 | } 34 | 35 | return str; 36 | } 37 | 38 | 39 | //新建文件夹 40 | function addFiles(file){ 41 | var turn = file.classList.contains('colum')?true:false; //判断是否横向布局 42 | 43 | var fileitem = document.createElement('div'); 44 | fileitem.className = 'fileitem folder'; 45 | 46 | var pic = document.createElement('div'); 47 | pic.className = 'pic'; 48 | 49 | var name = document.createElement('div'); 50 | name.className = 'name'; 51 | 52 | var title = document.createElement('span'); 53 | title.className = 'title'; 54 | title.style.display = 'none'; 55 | 56 | var Inp = document.createElement('input'); 57 | Inp.className = 'set-name'; 58 | Inp.type = 'text'; 59 | Inp.style.display = 'block'; 60 | 61 | 62 | name.appendChild(title); 63 | name.appendChild(Inp); 64 | 65 | fileitem.appendChild(pic); 66 | fileitem.appendChild(name); 67 | 68 | if(turn){ 69 | var type = document.createElement('div'); 70 | type.className = 'type'; 71 | type.innerHTML = 'folder'; 72 | fileitem.appendChild(type); 73 | } 74 | return fileitem; 75 | } 76 | 77 | 78 | 79 | //生成左侧导航列表 80 | function creatList(dataRoot){ 81 | var str = ``,childId = dataRoot.childrenId,len = childId.length,i; 82 | var type = dataRoot.type; 83 | if(type === 'folder'){ 84 | str += `
  • ${len?'':''}${dataRoot.name}` 85 | }; 86 | if(type === 'img'){ 87 | str += `
  • 88 | 89 | ${dataRoot.name}` 90 | } 91 | if(len){ 92 | str += `
      `; 93 | for(i=0;i`; 97 | } 98 | str += ``; 99 | 100 | return str; 101 | } 102 | 103 | 104 | 105 | //点击自身隐藏所有 106 | function listClick(wrapUl){ 107 | var firstList = wrapUl.children; 108 | var len = firstList.length; 109 | 110 | if(firstList[0].firstElementChild.onclick) return; 111 | 112 | for(var i=0;i 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
      11 |
      12 |
      13 | 14 |
      15 |
      16 |
      17 |
      18 |
      19 |
      20 | 21 |
      22 |
      23 |
      24 |
      25 |
      26 | 我的云盘 27 |
      28 |
        29 |
      • 30 | 标题1 31 |
          32 |
        • 33 | 标题一 34 |
          • 35 |
        36 |
        • 37 |
      • 38 | 标题2 39 |
          40 |
        • 41 | 标题一 42 |
          • 43 |
        44 |
        • 45 |
      46 |
      47 |
      48 |
      49 | 50 | 51 |
      52 | 53 |
      54 |
      55 | 56 |
      你确定要删除吗
      57 |
      58 |
      59 | 不再显示 60 | 61 | 62 |
      63 |
      64 |
      65 |

      重复的项目

      66 | 你有3个文件重名了大哥. 67 | 请对文件进行相应的操作: 68 |
        69 |
      • 70 | 文件一 71 |
        72 | 73 | 74 | 75 |
        76 |
        • 77 |
      78 | 79 |
      80 | 81 | 82 |
      83 |
      84 | 85 | 110 | 111 |
      112 |
      113 | 全部文件> 114 |
      115 |
      116 | 117 | 118 | 119 | 120 | 121 | 122 |
      123 |
      124 | 125 |
      126 |
      127 |
      128 |
      129 |
      130 | 新建文件夹 131 | 132 |
      133 |
      134 |
      135 | 136 |
      137 |
      138 | 139 |
      140 |
        141 | 142 |
      143 |
        144 | 145 |
      146 |
      147 | 148 | 149 |
      150 |
      151 |
      152 | 153 |
      154 |
      155 | 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /recycle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
      11 |
      12 |
      13 | 14 |
      15 |
      16 |
      17 |
      18 |
      19 |
      20 | 21 |
      22 |
      23 |
      24 |
      25 |
      26 | 回收站 27 |
      28 |
        29 |
      • 30 | 标题1 31 |
          32 |
        • 33 | 标题一 34 |
          • 35 |
        36 |
        • 37 |
      • 38 | 标题2 39 |
          40 |
        • 41 | 标题一 42 |
          • 43 |
        44 |
        • 45 |
      46 |
      47 |
      48 |
      49 | 50 | 51 |
      52 | 53 |
      54 |
      55 | 56 |
      你确定要删除吗
      57 |
      58 |
      59 | 不再显示 60 | 61 | 62 |
      63 |
      64 |
      65 |

      重复的项目

      66 | 你有3个文件重名了大哥. 67 | 请对文件进行相应的操作: 68 |
        69 |
      • 70 | 文件一 71 |
        72 | 73 | 74 | 75 |
        76 |
        • 77 |
      78 | 79 |
      80 | 81 | 82 |
      83 |
      84 | 109 | 110 |
      111 |
      112 | 全部文件> 113 |
      114 |
      115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 |
      123 |
      124 | 125 |
      126 |
      127 |
      128 |
      129 |
      130 | 新建文件夹 131 | 132 |
      133 |
      134 |
      135 | 136 |
      137 |
      138 | 139 |
      140 |
        141 |
          142 |
        • 143 | hah 144 |
            145 |
          • asdasd
            • 146 |
          147 |
          • 148 |
        • 149 | hah 150 |
            151 |
          • asdasd
            • 152 |
          153 |
          • 154 |
        155 |
        156 | 157 | 158 |
        159 |
        160 |
        161 | 162 |
        163 |
        164 | 165 | 166 | 167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /script/main.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | //-------------主要公用变量获取-------- 4 | 5 | var leftList = document.querySelector('.left_list'); 6 | var listBox = leftList.querySelector('.list'); 7 | 8 | 9 | var navBox = document.querySelector('.nav'); 10 | var btns = document.querySelectorAll('.btn button'); 11 | 12 | var listShow = document.querySelector('.listShow'); //点击移动到 弹出的操作框 13 | var listShowBox = listShow.querySelector('.listShowBox'); //移动目标显示框 14 | 15 | 16 | var main = document.querySelector('.main'); 17 | var fileBox = document.querySelector('.file-container'); 18 | var fileitems = fileBox.children; 19 | 20 | var fileWrap = document.querySelector('.file-box'); 21 | 22 | var isRec = fileBox.classList.contains('rec'); //如果是回收站页面 调用另外一套数据 23 | var data = getData()||user_data; 24 | // setData() 25 | var arrCheck=[];//粘贴板 26 | 27 | var nowId=isRec?8:0; //当前显示目录的id 默认是回收站或者云盘根目录 28 | 29 | //--------------------------------------- 30 | 31 | //初始化 32 | load(nowId); 33 | loadlist(); 34 | 35 | 36 | //左侧目录加载 37 | function loadlist(){ 38 | var dataRoot = isRec?8:0; 39 | listBox.innerHTML =creatList(data[dataRoot]); 40 | } 41 | //导航栏和文件夹加载 42 | function load(currentId){ 43 | var currentChild = getChildrenById(data,nowId); //要渲染的子集 44 | var currentPar = getParentsById(data,nowId);// 当前目录 以及 所有父级 45 | //生成文件夹 46 | fileBox.innerHTML = creatFiles(currentChild,fileBox); 47 | //生成导航栏 48 | navBox.innerHTML = creatNavs(currentPar,isRec); 49 | }; 50 | 51 | //---------------------文件事件------------------ 52 | 53 | (function(){ 54 | //图片类型显示 55 | var imgBox = document.querySelector('.imgShowBox'); 56 | var imgShow = document.querySelector('.imgShow'); 57 | var imgShut = document.querySelector('.btnimg'); 58 | 59 | //选择文件 、//打开图片、//进入文件夹 60 | fileBox.addEventListener('click',pickone); 61 | window.addEventListener('keydown',function(e){ 62 | var code = e.keyCode; 63 | if(code===17){ 64 | fileBox.removeEventListener('click',pickone); 65 | fileBox.addEventListener('click',picks); 66 | } 67 | window.addEventListener('keyup',function(e){ 68 | fileBox.removeEventListener('click',picks); 69 | fileBox.addEventListener('click',pickone); 70 | }) 71 | }) 72 | 73 | function pickone(e){ 74 | pick(e,'pickone'); 75 | } 76 | function picks(e){ 77 | pick(e); 78 | } 79 | function pick(e,pickType){ 80 | var target =e.target; 81 | var parent = getParentCls(target,'fileitem'); //文件夹内才有效 82 | if(!parent)return; 83 | var currentId = parent.dataset.index*1; 84 | var current = data[currentId]; 85 | 86 | if(target.nodeName === 'SPAN'){ 87 | rename.onclick(); 88 | return; 89 | } 90 | if(target.nodeName === 'INPUT'){ 91 | return; 92 | } 93 | 94 | if(pickType) allSelect(false,current);//取消所有 选中当前 95 | 96 | current.checked = parent.classList.toggle('active')?true:false; 97 | } 98 | 99 | fileBox.addEventListener('dblclick',function(e){ 100 | var target = e.target; 101 | var parent = getParentCls(target,'fileitem'); 102 | e.preventDefault(); 103 | if(parent&&target.nodeName!=='INPUT'&&target.nodeName!=='SPAN'){ 104 | 105 | var currentId = parent.dataset.index*1;//通过图片或者是其他元素找到父级fileitem 106 | var current = getDataById(data,currentId); 107 | 108 | //进入文件夹啊 109 | if(!parent.classList.contains('img')){ 110 | //数据的checked属性初始化; 111 | var currentChild = getChildrenById(data,nowId); //找到它父级 循环children 数据里面的checked = false 112 | for(var i =0;i=400){ 576 | left = 400; 577 | }; 578 | if(left<=200){ 579 | left = 200; 580 | }; 581 | leftScroll.style.left = left + 'px'; 582 | leftBox.style.width = left +'px'; 583 | }; 584 | 585 | document.addEventListener('mouseup',function(e){ 586 | document.onmousemove = null; 587 | }); 588 | 589 | }; 590 | })(); 591 | //-----------头部的一些功能-------------------- 592 | (function(){ 593 | var rightMenu = document.querySelector('.rightmenu'); 594 | var rightRow = document.querySelector('.row'); 595 | var shutBtn = document.querySelector('.shutico'); 596 | var searchBtn = document.querySelector('.searchbtn'); 597 | var searchText = document.querySelector('.searchtext'); 598 | var menuOpen = document.querySelector('.menu_use'); 599 | 600 | //弹出右侧菜单 601 | menuOpen.onclick = function(){ 602 | rightMenu.style.width = '240px'; 603 | rightMenu.style.right = '0'; 604 | rightMenu.style.opacity = '1'; 605 | shutBtn.style.display = 'block'; 606 | rightRow.style.right = '244px'; 607 | }; 608 | shutBtn.onclick = function(){ 609 | rightMenu.style.width = ''; 610 | rightMenu.style.opacity = ''; 611 | rightMenu.style.right = ''; 612 | shutBtn.style.display = ''; 613 | rightRow.style.right = ''; 614 | }; 615 | 616 | searchText.addEventListener('change',function(e){ 617 | //搜索功能 618 | var value = searchText.value; 619 | searchFile(value,nowId,fileBox); 620 | searchText.value = ''; 621 | }); 622 | 623 | 624 | //搜索功能和右侧菜单的收合 625 | 626 | document.addEventListener('click',function(e){ 627 | 628 | var target = e.target; 629 | if(!target.classList.contains('searchtext')){ 630 | searchText.classList.remove('active'); 631 | }; 632 | if(target.className === 'searchbtn'){ 633 | searchText.classList.add('active'); 634 | searchText.focus(); 635 | searchText.select(); 636 | }; 637 | 638 | if(target.className!=='menu_use'){ 639 | rightMenu.style.width = '0px'; 640 | rightMenu.style.opacity = ''; 641 | shutBtn.style.display = 'none'; 642 | rightRow.style.right = '0px'; 643 | }; 644 | }); 645 | 646 | rightMenu.addEventListener('click',function(e){ 647 | e.stopPropagation(); 648 | }); 649 | })(); 650 | 651 | 652 | //回收站切换 653 | (function(){ 654 | var disk = document.querySelector('.disk'); 655 | var rubblish = document.querySelector('.rubbish'); 656 | 657 | 658 | disk.onmousedown = function(e){ 659 | if(!fileBox.classList.contains('rec'))return; 660 | window.location.href = 'index.html'; 661 | } 662 | 663 | rubblish.onmousedown = function(e){ 664 | if(fileBox.classList.contains('rec'))return; 665 | window.location.href = 'recycle.html'; 666 | } 667 | 668 | })() 669 | 670 | //文件夹拖动 671 | filePull(); -------------------------------------------------------------------------------- /script/tool.js: -------------------------------------------------------------------------------- 1 | 2 | //-----------本地存储------------ 3 | function setData(){ 4 | window.localStorage.setItem('data',JSON.stringify(data)); 5 | } 6 | function getData(){ 7 | return JSON.parse(window.localStorage.getItem('data')); 8 | } 9 | 10 | //----------重新渲染------- 11 | function reload(){ 12 | load(nowId); 13 | loadlist(); 14 | setData();//存储数据 15 | } 16 | 17 | //拿到 id 拿数据 18 | function getDataById(data,id){ 19 | return data[id]; 20 | } 21 | 22 | //根据id 拿儿子 23 | function getChildrenById(data,id){ 24 | 25 | var children = [],ids = data[id].childrenId ,len = ids.length; 26 | for(var i= 0;i= targetL && currentB >= targetT && currentL <= targetR && currentT <= targetB; 61 | } 62 | 63 | 64 | 65 | //找到 指定 class 祖先 66 | function getParentCls(ele,tarCls){ 67 | var cls = ele.classList; 68 | if(typeof cls === 'undefined')return; 69 | 70 | if(cls.contains(tarCls)){ 71 | return ele; 72 | }; 73 | return getParentCls(ele.parentNode,tarCls); 74 | } 75 | 76 | 77 | //数据的最大id (避免id重复) 78 | function maxId(userData){ 79 | return ++userData.maxId; 80 | } 81 | 82 | //选中文件 83 | function fileCheck(target){ 84 | var currentId = getParentCls(target,'fileitem').dataset.index*1;//通过图片或者是其他元素找到父级fileitem 85 | 86 | var current = getDataById(data,currentId); //找到当前的 添加checked 87 | 88 | target.classList.add('active'); 89 | target.parentNode.classList.add('active');//边框 90 | 91 | current.checked = true; 92 | } 93 | 94 | 95 | //检测同名 96 | function nameExist(data,value){ 97 | for(var i= 0;inowIndex? --item.moveIndex:item.moveIndex; 362 | }) 363 | } 364 | function tarIndex(coverArr,nowIndex){ 365 | coverArr.forEach(function(item){ 366 | item.index>nowIndex? --item.tarIndex:item.tarIndex; 367 | }) 368 | } 369 | 370 | //目标对象复制()并添加 371 | function deepCopy(target,toId){ 372 | var arr = []; 373 | var id; 374 | doCopy(target,toId); 375 | function doCopy(target,toId){ 376 | var newObj = {}; 377 | id = maxId(data); 378 | for (var i in target){ 379 | newObj[i] = target[i]; 380 | if(i === 'id'){ //switch 381 | newObj[i] = id; 382 | } 383 | if(i ==='pId'){ 384 | newObj[i] = toId; 385 | } 386 | //副本信息清空!! 387 | if(i==='copy'){ 388 | newObj[i] = 0; 389 | } 390 | if(i==='coverId'){ 391 | newObj[i] = undefined; 392 | } 393 | if(i==='showcopy'){ 394 | newObj[i] = undefined; 395 | } 396 | if(i==='arrCopy'){ 397 | newObj[i] = []; 398 | } 399 | if(i==='checked'){ 400 | newObj[i] = false; 401 | } 402 | } 403 | arr.push(newObj); 404 | if(newObj.childrenId.length){ //复制他以及他所有儿子 放到一个数组里面 405 | newObj.childrenId = []; //新儿子 406 | var childs = getChildrenById(data,target.id); 407 | for(var i = 0;i