可拖曳 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 }}