可拖动 Framer Motion 组件的保留位置

Question

我正在创建一个小部件仪表板，您可以在其中移动小部件，我的目标是在拖动小部件后保留它们的位置，以便在将来的会话中将它们加载到完全相同的位置。

这里有一个codesandbox，它说明了我在使用framer-motion时遇到的问题：https://codesandbox.io/p/sandbox/interesting-sun-p8h6cu。

小部件上的初始 top 和 left 值正确反映了其起始位置，但在拖动它后我无法保留其新位置。

我正在更新 onDragEnd 处理程序中小部件的位置，该处理程序又更新小部件上的 top 和 left 样式。通过 Framer-motion 使用 transform:translate 进行拖动并更新定位样式，这会产生一个小部件：

1. 在DragEnd 上正确保留其新位置
2. 在上一点之后在 UI 中移动，因为 top left 样式使 transform:translate 拖动样式的效果加倍。

我不知道如何解决这个问题。我尝试使用 transform:translate 进行初始定位，但它不起作用。另外，现在我认为一旦被拖动，成帧器运动就会覆盖它，从而导致不同的不需要的行为。

TLDR：我在显示绝对定位的组件时遇到问题，这些组件可通过 Framer-motion 的拖动功能进行拖动

Answer 1

您说得对，top 和 left 会加倍，因为 Framer 拖动功能正在改变 x 和 y 。由于您随后将 xy 变换应用于顶部和左侧，因此您会得到意想不到的结果。

如果您只更改 x 和 y，一切都应该保持同步。

style={{ x: widget.x, y: widget.y }}

而不是

style={{ left: widget.x, top: widget.y }}