實驗性 moveBefore() 支援

此頁面示範了實驗性的 moveBefore() DOM API 的使用，此 API 可在 Chrome Canary 中使用，並且在可用的情況下已整合到 htmx 的 hx-preserve 屬性中。

#取得 Chrome Canary & 啟用 moveBefore()

為了讓演示正常運作，您需要安裝 Chrome Canary 並啟用 API

• 導航至 chrome://flags/#atomic-move
• 啟用「Atomic DOM move」（原子 DOM 移動）

如果 moveBefore() API 可用，htmx 會在 hx-preserve 功能中利用此 API，讓您可以將元素標記為「保留」，並在其於螢幕上的不同區域之間移動時，保留其所有狀態（當新內容合併進來時）。這比目前的其他替代方案（例如變形）提供了更好的開發人員體驗，因為變形依賴於新頁面的結構「足夠接近」，才不需要移動影片元素之類的項目。

#示範

如果您檢查下方的影片，您會看到它嵌入在一個 div 元素中。如果您點擊「檢視詳情」連結（這是一個被提升的連結），您將轉換到另一個頁面，該頁面會有一個相同 ID 的影片元素，但這次嵌入在 figure 元素中。如果沒有 moveBefore() 功能，這種情況下不可能讓影片繼續播放，因為「重新設定父元素」（即更改元素的父元素）會導致它重置。

moveBefore() 為網頁開發開啟了大量的可能性，它允許開發人員完全改變頁面的佈局，同時仍然保留元素的播放狀態、焦點等等。