实验性 moveBefore() 支持

此页面展示了如何使用实验性 moveBefore() DOM API，该 API 在 Chrome Canary 中可用，并且已集成到 htmx 的 hx-preserve 属性中（如果可用）。

#获取 Chrome Canary 并启用 moveBefore()

为了使演示正常工作，您需要安装 Chrome Canary 并启用 API

• 导航到 chrome://flags/#atomic-move
• 启用“原子 DOM 移动”

如果可用，htmx 将利用此 API 在 hx-preserve 功能中，允许您将元素标记为“保留”，并在新内容合并时将其状态保留在屏幕上不同区域之间移动。这比当前的替代方案（例如变形）要好得多，因为变形依赖于新页面的结构“足够接近”，以至于无需移动视频元素等内容。

#演示

如果您检查下面的视频，您会发现它嵌入在一个 div 元素中。如果您点击“查看详情”链接（已增强），您将过渡到另一个页面，该页面包含一个具有相同 ID 的视频元素，但嵌入在一个 figure 元素中。如果没有 moveBefore() 功能，在这种情况下无法保持视频播放，因为“重新父化”（即更改元素的父级）会导致它重置。

moveBefore() 通过允许开发人员完全更改页面的布局，同时保留元素的播放状态、焦点等，为 Web 开发开辟了大量可能性。