Maintaining dragged element's last position _and_ using `restrictToWindowEdges` #1492

viveleroi · 2024-09-22T19:26:04Z

viveleroi
Sep 22, 2024

I'm trying to implement moveable modal windows in our app. These aren't meant to be "dropped" so they need to retain their position on drag end. It seemed like all I should need to do is store the position on drag end. Both the position logic and the viewport edge restriction works the first time but after that, there's clearly a mismatch between where the dndkit library thinks the element is versus the viewport. As soon I start moving it again, it restricts the movement but not where the viewport actually is.

Is there a better way to do this?

  const [position, setPosition] = useState<Position>({
    x: 0,
    y: 0
  })

  useDndMonitor({
    onDragEnd: event => {
      setPosition({
        x: position.x + event.delta.x,
        y: position.y + event.delta.y
      })
    }
  })

  const style = {
    transform: transform
      ? `translate3d(${transform.x + position.x}px, ${transform.y + position.y}px, 0)`
      : `translate3d(${position.x}px, ${position.y}px, 0)`
  }