這次我們來做一個(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自由桌面

延伸閱讀

學(xué)習(xí)是年輕人改變自己的最好方式-Java培訓(xùn),做最負(fù)責(zé)任的教育,學(xué)習(xí)改變命運(yùn),軟件學(xué)習(xí),再就業(yè),大學(xué)生如何就業(yè),幫大學(xué)生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動(dòng)軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計(jì)培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學(xué)習(xí)是年輕人改變自己的最好方式