实验性 moveBefore() 支持

此页面演示了 Chrome Canary 中可用的实验性 moveBefore() DOM API 的使用，如果可用，它已集成到 htmx 的 hx-preserve 属性中。

¥This page demonstrates the use of the experimental moveBefore() DOM API available in Chrome Canary, which has been integrated into the hx-preserve attribute of htmx, if it is available.

获取 Chrome Canary 并启用 moveBefore()

¥Getting Chrome Canary & Enabling moveBefore()

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

¥For the demo to work properly you will need to install Chrome Canary and enable the API:

• 导航到 chrome://flags/#atomic-move

  ¥Navigate to chrome://flags/#atomic-move

• 启用 “原子 DOM 移动”

  ¥Enable “Atomic DOM move”

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

¥htmx takes advantage of this API in the hx-preserve functionality if it is available, allowing you to mark an element as “preserved” and having all its state preserved as it moves between areas on the screen when new content is merged in. This is significantly better developer experience than current alternatives, such as morphing, which rely on the structure of the new page being “close enough” to not have to move things like video elements.

演示

¥Demo

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

¥If you inspect the video below you will see that it is embedded in a div element. If you click the “View Details” link, which is boosted, you will transition to another page with a video element with the same id, but embedded in a figure element instead. Without the moveBefore() functionality it is impossible to keep the video playing in this situation because “reparenting” (i.e. changing the parent of an element) causes it to reset.

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

¥moveBefore() opens up a huge number of possibilities in web development by allowing developers to completely change the layout of a page while still preserving elements play state, focus, etc.