DraggingPremium
The FloatingToolbar provides an optional drag mode that lets users reposition the component within the viewport. This is useful for design tools, PDF viewers, and other applications where users must park the toolbar anywhere over the workspace.
Enabling Drag
To enable dragging, set the draggable property to true. The FloatingToolbar then renders a dedicated drag handle in front of the hosted tools. Users can reposition the component with the pointer, or press M to enter the keyboard Move mode, move the component with the arrow keys, and press Enter to commit the new position. Pressing Escape restores the position from before Move mode began.
The viewport always bounds the drag position, and you cannot configure this behavior.
The following example demonstrates pointer and keyboard repositioning with draggable enabled. It displays the current position and the position where the last drag ended.
Setting the Position Programmatically
Use the setPosition method of the FloatingToolbarHandle to move the component in free-position mode. Attach a ref to the FloatingToolbar to access the handle. The explicit position overrides containerAlign until the component is remounted or the anchor property changes.
The following example uses a Button to move the FloatingToolbar to specific coordinates on the page.