【HoorayOS】開源的Web桌面應用框架(文件夾功能分析)

  下一版本的重要功能就是「文件夾」,隨着應用碼頭的出現,任務欄也改爲大圖標的模式,桌面可放置圖標的位置愈來愈少,「文件夾」就應然而生了,但在製做過程當中,發現幾個難點,也就是圖標拖動時須要注意的部分。以下圖,文件夾內的圖標在拖動結束的時候,位置可能會處在四處:應用碼頭、桌面、當前文件夾、其餘文件夾數組

  前兩種狀況能夠參考下圖,圖標拖動的第一步就是先畫格子。(demo:http://jsbin.com/otihix/1.net

  而後記錄下每一個格子四個角的座標保存爲數組,而後循環數組依次添加圖標進去。blog

  以後圖標拖動也是須要這個格子數組,當我拖動完畢釋放圖標的時候,判斷鼠標釋放的位置處於哪一個格子中間,進行圖標移動並從新排序,實現圖標拖動功能,應用碼頭拖動也是一樣思路,二者結合起來無非就是要判斷兩次,先判斷釋放位置是否處於應用碼頭的格子內,而後再判斷是否處於桌面的格子內。排序

  我在想,文件夾之間的圖標拖動是否也能夠參考這種模式,桌面上全部已打開並處於顯示狀態的文件夾窗口,看成是一個個的格子,保存到一個數組裏。由於顯示在桌面的窗口無論在任何狀況都是高於桌面的,也就是覆蓋在桌面上,因此當拖動結束釋放時,優先判斷圖標是否處於文件夾的格子內,而後再依次判斷應用碼頭的格子和桌面的格子。開發

  隨之又想到會出現這種狀況,就是文件夾會重疊,若是我圖標拖動的位置恰好處於圖中問號處,系統怎麼知道我先要拖放的位置的哪一個窗口呢?get

  其實細想一下,徹底不用擔憂。個人文件夾格子數組能夠在圖標拖動的時候建立,建立的時候依次按文件夾窗口z-index的值從大到小來讀取,這樣就是保證文件夾格子數組裏記錄內容的順序也是按照文件夾層級順序來存放的,當我循環數組判斷圖標拖放位置的時候,天然也就避免了剛纔那個問題。循環

  OK,以上就是文件夾內圖標拖動的大體思路,但願開發的時候可以順利些,也能讓第三版順利面世,讓你們用用試試。im

  PS:更新demo演示:http://jsfiddle.net/UjS7Y/2/embedded/result/demo

相關文章
相關標籤/搜索