這次我們來做一個有趣的事情,有朋友跟做了很遠,找我要自由桌面的代碼,這次我們將演示自由桌面的代碼。

自由桌面:用戶可以隨意增刪改桌面的布局、個數(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自由桌面

網(wǎng)友評論