Position préservée pour les composants déplaçables Framer Motion

Question

Je crée un tableau de bord de widgets dans lequel vous pouvez déplacer les widgets, mon objectif est de conserver la position des widgets après les avoir fait glisser afin qu'ils puissent être chargés exactement dans la même position lors des sessions futures.

Voici un codesandbox qui illustre les problèmes que je rencontre avec framer-motion : https://codesandbox.io/p/sandbox/interesting-sun-p8h6cu.

La valeur initiale

sur le widget top 和 left reflète correctement sa position de départ, mais je ne peux pas conserver sa nouvelle position après l'avoir fait glisser.

Je mets à jour la position du widget dans le gestionnaire onDragEnd, qui à son tour met à jour le style onDragEnd 处理程序中小部件的位置，该处理程序又更新小部件上的 top 和 left 样式。通过 Framer-motion 使用 transform:translate sur le widget. Utilisez

via Framer-motion pour faire glisser et mettre à jour le style de positionnement, ce qui donne un widget :

Conserve correctement sa nouvelle position sur DragEnd
2. top + left 样式使 transform:translateDéplacez-vous dans l'interface utilisateur après le point précédent, car
l'effet du glissement des styles est doublé.

transform:translateJe ne sais pas comment résoudre ce problème. J'ai essayé d'utiliser

pour le positionnement initial mais cela ne fonctionne pas. De plus, je pense maintenant que le mouvement du framer le remplace une fois qu'il est déplacé, provoquant différents comportements indésirables.

TLDR : J'ai du mal à afficher les composants positionnés de manière absolue qui peuvent être glissés via la fonctionnalité de glisser de Framer-motion🎜

Answer 1

Vous avez raison,top 和 left 会加倍，因为 Framer 拖动功能正在改变 x 和 y . Puisque vous appliquez ensuite la transformation xy en haut et à gauche, vous obtenez des résultats inattendus.

Si vous changez seulement x 和 y, tout devrait rester synchronisé.

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

au lieu de

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