Maison > Questions et réponses > le corps du texte
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
top
+ left
样式使 transform:translate
Déplacez-vous dans l'interface utilisateur après le point précédent, car
transform:translate
Je ne sais pas comment résoudre ce problème. J'ai essayé d'utiliser
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🎜
P粉6210339282024-04-01 20:10:43
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 }}