下一版本的重要功能就是“文件夾”,隨着應用碼頭的出現,任務欄也改成大圖標的模式,桌面可放置圖標的位置越來越少,“文件夾”就應然而生了,但在制作過程中,發現幾個難點,也就是圖標拖動時需要注意的部分。如下圖,文件夾內的圖標在拖動結束的時候,位置可能會處在四處:應用碼頭、桌面、當前文件夾、其他文件夾
前兩種情況可以參考下圖,圖標拖動的第一步就是先畫格子。(demo:http://jsbin.com/otihix/1)
然后記錄下每個格子四個角的坐標保存為數組,然后循環數組依次添加圖標進去。
之后圖標拖動也是需要這個格子數組,當我拖動完畢釋放圖標的時候,判斷鼠標釋放的位置處於哪個格子中間,進行圖標移動並重新排序,實現圖標拖動功能,應用碼頭拖動也是同樣思路,兩者結合起來無非就是要判斷兩次,先判斷釋放位置是否處於應用碼頭的格子內,然后再判斷是否處於桌面的格子內。
我在想,文件夾之間的圖標拖動是否也可以參考這種模式,桌面上所有已打開並處於顯示狀態的文件夾窗口,當作是一個個的格子,保存到一個數組里。因為顯示在桌面的窗口不管在任何情況都是高於桌面的,也就是覆蓋在桌面上,所以當拖動結束釋放時,優先判斷圖標是否處於文件夾的格子內,然后再依次判斷應用碼頭的格子和桌面的格子。
隨之又想到會出現這種情況,就是文件夾會重疊,如果我圖標拖動的位置剛好處於圖中問號處,系統怎么知道我先要拖放的位置的哪個窗口呢?
其實細想一下,完全不用擔心。我的文件夾格子數組可以在圖標拖動的時候創建,創建的時候依次按文件夾窗口z-index的值從大到小來讀取,這樣就是保證文件夾格子數組里記錄內容的順序也是按照文件夾層級順序來存放的,當我循環數組判斷圖標拖放位置的時候,自然也就避免了剛才那個問題。
OK,以上就是文件夾內圖標拖動的大致思路,希望開發的時候能夠順利些,也能讓第三版順利面世,讓大家用用試試。
PS:更新demo演示:http://jsfiddle.net/UjS7Y/2/embedded/result/