实验性 moveBefore() 支持

本页演示了 Chrome Canary moveBefore()中实验性的 DOM API的使用方法，该 API 已被集成到 htmx 的 hx-preserve 属性中（如果可用）。

获取 Chrome Canary 并启用moveBefore()

为了使演示正常运行，你需要安装 Chrome Canary 并启用 API：

• 在 Chrome 浏览器地址栏打开 chrome://flags/#atomic-move
• 启用“Atomic DOM move”

如果此 API 可用，htmx 会集成至 hx-preserve 属性，允许你将元素标记为“preserved”，并在合并新内容时，当元素在屏幕区域之间移动时保留其所有状态。这比当前的替代方案（例如变形算法）的开发人员体验要好得多，变形依赖于新页面的结构“足够接近”，而不必移动视频元素等内容。

演示

如果你检查下面的视频，你将看到它嵌入在一个div元素中。如果你点击增强的“查看详细信息”链接，你将转换到另一个页面，其中包含具有相同 ID 的视频元素，但嵌入在一个figure 元素中。如果没有此 moveBefore() 功能，在这种情况下不可能继续播放视频，因为“重新设置父级”（即更改元素的父级）会导致其重置。

moveBefore()通过允许开发人员完全改变页面的布局，同时仍然保留元素的播放状态、焦点等，为 Web 开发开辟了大量的可能性。 完整示例请到 htmx 官网 查看。 注意：本示例需要启用 Atomic DOM move