Create draggable floating area
The use-floating-window hook makes a given element draggable:
Use constrainToViewport option to restrict element movement to the viewport boundaries. If you do not set constrainToViewport option, the element can be dragged outside the viewport:
Use constrainOffset option to set the offset from the viewport edges when constraining the element. This option requires constrainToViewport: true :
dragHandleSelector option allows specifying a selector of an element (or a group of elements) that should be used to drag floating window. If not specified, the entire root element is used as a drag target.
excludeDragHandleSelector option excludes elements within dragHandleSelector from the drag event. In the following example, the close button is excluded from the drag event:
Use enabled option to enable or disable dragging:
Call setPosition function to set the position of the element programmatically. This function accepts an object with top , left , right and bottom properties, from which you should only specify two (for example, top and left , bottom and right ).
Use axis option to restrict movement to the specified axis:
If you prefer component API, you can use FloatingWindow component. It supports the same options as the hook and provides extra features like portal rendering, basic styles and more.
UseFloatingWindowOptions and UseFloatingWindowReturnValue types are exported from the @mantine/hooks package; you can import them in your application: