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