저는 위젯을 이동할 수 있는 위젯 대시보드를 만들고 있습니다. 제 목표는 위젯을 드래그한 후에도 위젯의 위치를 유지하여 향후 세션에서 정확히 동일한 위치에 로드될 수 있도록 하는 것입니다.
다음은 프레이머 모션과 관련하여 겪고 있는 문제를 보여주는 코드 샌드박스입니다: https://codesandbox.io/p/sandbox/interesting-sun-p8h6cu.
위젯의 초기 top 和 left 값은 시작 위치를 올바르게 반영하지만 드래그한 후에는 새 위치를 유지할 수 없습니다.
onDragEnd 핸들러에서 위젯의 위치를 업데이트하고 있으며, 그러면 위젯의 onDragEnd 处理程序中小部件的位置，该处理程序又更新小部件上的 top 和 left 样式。通过 Framer-motion 使用 transform:translate 스타일이 업데이트됩니다. Framer-motion을 통해
top + left 样式使 transform:translate스타일 드래그 효과가 2배가 되므로 이전 지점 이후 UI를 이동하세요. 이 문제를 해결하는 방법을 모르겠습니다. 초기 위치 지정에 transform:translate를 사용해 보았지만 작동하지 않습니다. 또한 이제 프레이머 모션이 드래그되면 이를 무시하여 다른 원치 않는 동작이 발생한다고 생각합니다.
TLDR: Framer-motion의 드래그 기능을 통해 드래그할 수 있는 절대 위치 구성요소를 표시하는 데 문제가 있습니다
P粉6210339282024-04-01 20:10:43
당신 말이 맞아요,top 和 left 会加倍，因为 Framer 拖动功能正在改变 x 和 y . 그런 다음 위쪽과 왼쪽에 xy 변환을 적용하므로 예상치 못한 결과가 발생합니다.
만 변경하는 경우 x 和 y 모든 것이 동기화 상태를 유지해야 합니다.
대신
으아아아