這次我們來做一個(gè)有趣的事情,有朋友跟做了很遠(yuǎn),找我要自由桌面的代碼,這次我們將演示自由桌面的代碼。
自由桌面:用戶可以隨意增刪改桌面的布局、個(gè)數(shù)(只留自己需要看到的數(shù)據(jù)),這次純屬EasyUI前端
當(dāng)然您拋棄EasyUI你同樣也能為你的系統(tǒng)桌面定制有趣自由布局
結(jié)果預(yù)覽
實(shí)現(xiàn)思路
本次實(shí)現(xiàn)主要用到EasyUI一個(gè)非常不常用的組件Draggable(拖拽)
雖然圖顯示簡單,但是實(shí)際做起來非常的耗時(shí),有興趣的朋友在尾部下來看看拖拽和實(shí)現(xiàn),下面是實(shí)現(xiàn)思路和功能:
- 拖拽之后DIV中保存了DIV的位置
- 部件篩選是以Css 的Display屬性來控制的
- 部件復(fù)位是初始化全部部件
- 保存是保存整個(gè)范圍內(nèi)的Div內(nèi)容來保存到數(shù)據(jù)庫
實(shí)現(xiàn)代碼
整個(gè)拖拽功能的代碼如下(展開查看)
EasyUI自由桌面