Allow restricting draggable area to specific parent element

[ScottFSeely]

Right now specifying a parent container is somewhat restricted to a handful of options. Would be nice to have a modifier that takes a parent element to assign as the restricting container.

I have a custom modifier that uses logic in the utility restrictToBoundingRect.ts to get past this for now. It would also be nice if that utility was exported in the modifiers or utilities package.

[hexwit]

@ScottFSeely Could you provide an example how to restrict draggable area to specific parent element with help of restrictToBoundingRect?

[goldmont]

@ScottFSeely Could you provide an example how to restrict draggable area to specific parent element with help of restrictToBoundingRect?

Hi,

I also need restrictToBoundingRect utility in order to restrict the movement to an outer parent. As of now, I had to manually import the logic into my project. It would be great to have that utility exported by the library.

[ScottFSeely]

@hexwit (Sorry for the delayed response)

Here is a working example: https://codesandbox.io/s/objective-lamport-oo8pcw

Note that the restrictToBoundingRect.ts is a straight copy and paste from the dnd-kit source.

[irshathcodes]

Here's an easy way to achieve this by extending the existing modifier.

        modifiers={[
          e =>
            restrictToParentElement({
              ...e,
              containerNodeRect: parentRef?.current?.getBoundingClientRect() as ClientRect | null,
            }),
        ]}

[tomasr8]

Any update on this? Exposing restrictToBoundingRect would allow us to more easily build custom modifiers without having to duplicate the code..