打造類似 Google iGoogle 的拖拽佈局並儲存使用者偏好

前言

早期 Google 個性化主頁（iGoogle）讓使用者能自由拖曳區塊、自訂儀表板佈局。這篇文章將示範如何用原生 JavaScript 與 CSS 實現一個可拖曳、可儲存狀態的入口網站佈局引擎，核心在於滑鼠事件處理、DOM 節點移動與 Cookie 持久化。

核心架構

1. CSS 佈局基礎

使用 table 結構作為容器，每個可拖曳模組外層包裹一個 class="dragTable" 的表格，標題列套用 class="dragTR" 提供視覺提示與滑鼠游標樣式。

.dragTable { margin-top: 10px; width: 100%; background-color: #fff; }
.dragTR { cursor: move; font-weight: bold; background-color: #6993bC; color: #FFFFFF; height: 20px; }
#parentTable { border-collapse: collapse; margin: 0 0 0 10px; }

2. Drag 物件：拖曳邏輯封裝

將所有拖曳相關狀態與方法集中在 Drag 物件：

• dragStart：建立半透明分身節點，記錄初始座標。
• draging：根據滑鼠位置移動分身，並即時判斷懸停於哪個容器儲存格，自動插入或追加被拖曳模組。
• dragEnd：釋放時將分身動畫回歸實體位置，並呼叫 setCookie 記錄模組的 top、left。
• getInfo：遞迴計算元素相對文檔的絕對座標。
• repos：釋放後的緩動動畫。
• inint：掃描所有 dragTable，綁定 onmousedown 事件。

3. Cookie 持久化

setCookie 與 getCookie（未列出但隱含）負責將每個模組的座標寫入 Cookie，下次載入時可直接套用。範例中於 dragEnd 寫入：

setCookie(Drag.ao.id + "top", Drag.getInfo(Drag.ao).top);
setCookie(Drag.ao.id + "left", Drag.getInfo(Drag.ao).left);

進階功能：摺疊/展開與手動儲存

collapseExpand 讓使用者點擊標題列圖示切換內容顯示；saveLayout 與 displaySaveLayout 提供「儲存版面」按鈕，將當前順序回傳伺服器或僅在狀態列提示成功。

完整初始化流程

1. 頁面載入 → Drag.inint() 掃描並綁定事件。
2. 讀取 Cookie → 若有紀錄則以 position:absolute 定位各模組（註解中已示範）。
3. 使用者拖曳 → 即時調整 DOM 順序與視覺位置。
4. 釋放滑鼠 → 寫入 Cookie、播放回彈動畫。

現代化建議

• 改用 HTML5 Drag and Drop API 或 SortableJS 等成熟庫，支援觸控裝置。
• 以 localStorage 取代 Cookie，容量更大且不隨請求傳送。
• 採用 Flexbox/Grid 佈局，移除表格結構，提升響應式能力。

這個範例雖屬早期實作，但完整展示了「拖曳排序 → 狀態持久化 → 狀態還原」的核心閉環，是理解前端個性化佈局機制的優良教材。