diff --git a/apps/docs/extend/modifiers.mdx b/apps/docs/extend/modifiers.mdx index 75a1d6dc..3924a69e 100644 --- a/apps/docs/extend/modifiers.mdx +++ b/apps/docs/extend/modifiers.mdx @@ -33,7 +33,7 @@ function App() { Modifiers can also be applied to individual [draggable](/concepts/draggable) elements by passing them to the `modifiers` option. -For example, if you wanted to only enable the `RestrictToContainer` modifier for this specific draggable element, while using the `RestrictToHorizontalAxis` globally for all other draggable elements: +For example, if you wanted to only enable the `RestrictToElement` modifier for this specific draggable element, while using the `RestrictToHorizontalAxis` globally for all other draggable elements: ```js import {Draggable} from '@dnd-kit/dom'; @@ -45,7 +45,8 @@ function App() { const draggable = new Draggable({ id: 'draggable', - modifiers: [RestrictToContainer], + element, + modifiers: [RestrictToElement.configure({element: element.parentElement})], }, manager); } ``` @@ -76,7 +77,7 @@ These modifiers can be imported from `@dnd-kit/dom/modifiers`. Restricts the movement of draggable elements to the window. - + Restricts the movement of draggable elements to the container element. diff --git a/apps/docs/overview.mdx b/apps/docs/overview.mdx index 211a6035..d55b1e32 100644 --- a/apps/docs/overview.mdx +++ b/apps/docs/overview.mdx @@ -7,6 +7,7 @@ description: 'Learn how to build drag and drop interfaces with ## Getting started diff --git a/apps/docs/react/hooks/use-draggable.mdx b/apps/docs/react/hooks/use-draggable.mdx index 0c5a40ce..08333817 100644 --- a/apps/docs/react/hooks/use-draggable.mdx +++ b/apps/docs/react/hooks/use-draggable.mdx @@ -148,12 +148,12 @@ And here is an example of how to restrict dragging to the container element of t ```jsx import {useDraggable} from '@dnd-kit/react'; -import {RestrictToContainer} from '@dnd-kit/dom/modifiers'; +import {RestrictToElement} from '@dnd-kit/dom/modifiers'; function Draggable({id}) { const {ref} = useDraggable({ id, - modifiers: [RestrictToContainer], + modifiers: [RestrictToElement.configure({element: document.body})], }); } ```