드래그 가능한 Framer Motion 구성 요소의 보존 위치

Question

저는 위젯을 이동할 수 있는 위젯 대시보드를 만들고 있습니다. 제 목표는 위젯을 드래그한 후에도 위젯의 위치를 ​​유지하여 향후 세션에서 정확히 동일한 위치에 로드될 수 있도록 하는 것입니다.

다음은 프레이머 모션과 관련하여 겪고 있는 문제를 보여주는 코드 샌드박스입니다: https://codesandbox.io/p/sandbox/interesting-sun-p8h6cu.

위젯의 초기 top 和 left 값은 시작 위치를 올바르게 반영하지만 드래그한 후에는 새 위치를 유지할 수 없습니다.

onDragEnd 핸들러에서 위젯의 위치를 ​​업데이트하고 있으며, 그러면 위젯의 onDragEnd 处理程序中小部件的位置，该处理程序又更新小部件上的 top 和 left 样式。通过 Framer-motion 使用 transform:translate 스타일이 업데이트됩니다. Framer-motion을 통해

를 사용하여 위치 지정 스타일을 드래그하고 업데이트하면 위젯이 생성됩니다.

DragEnd에서 새로운 위치를 올바르게 유지합니다
2. top + left 样式使 transform:translate스타일 드래그 효과가 2배가 되므로 이전 지점 이후 UI를 이동하세요.

이 문제를 해결하는 방법을 모르겠습니다. 초기 위치 지정에 transform:translate를 사용해 보았지만 작동하지 않습니다. 또한 이제 프레이머 모션이 드래그되면 이를 무시하여 다른 원치 않는 동작이 발생한다고 생각합니다.

TLDR: Framer-motion의 드래그 기능을 통해 드래그할 수 있는 절대 위치 구성요소를 표시하는 데 문제가 있습니다

Answer 1

당신 말이 맞아요,top 和 left 会加倍，因为 Framer 拖动功能正在改变 x 和 y . 그런 다음 위쪽과 왼쪽에 xy 변환을 적용하므로 예상치 못한 결과가 발생합니다.

만 변경하는 경우 x 和 y 모든 것이 동기화 상태를 유지해야 합니다.

으아아아

대신

으아아아