New to Kendo UI for Angular? Start a free 30-day trial

Dragging

Updated on Oct 6, 2026

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.

To enable dragging, set the draggable property to true. When you enable it, the FloatingToolBar renders a dedicated drag handle in front of the hosted tools. Users can reposition the component by dragging the handle with the pointer or by using the keyboard Move mode.

The viewport always bounds the drag position, and you cannot configure this behavior.

The following example demonstrates pointer repositioning with draggable enabled. It displays the current position and the position where the last drag ended.

Example
View Source
Loading ...
In this article
Suggested Links
Not finding the help you need?
Contact Support