# Events

The FloatingToolBar fires events in response to dragging.

## Drag Events

The FloatingToolBar exposes the following events for drag and position changes:

* [`dragStart`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent#dragstart)—Fires when a pointer drag begins. The event is cancelable through `event.preventDefault()`.
* [`move`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent#move)—Fires whenever the position of the FloatingToolBar changes as a result of a pointer drag.
* [`dragEnd`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent#dragend)—Fires when a pointer drag ends.

Each event includes the `top` and `left` coordinates of the FloatingToolBar for that stage of the interaction. The `dragStart` event reports the starting position, `move` reports the updated positions, and `dragEnd` reports the final position.

The following example logs drag start, end, and position changes. Drag the toolbar to see the event entries.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/floating-toolbar/events/source.txt)

## Canceling a Drag Operation

Call `event.preventDefault()` in the `dragStart` handler to cancel the operation. When canceled, neither `move` nor `dragEnd` fires for that interaction.

The following demo lets you lock the toolbar to prevent repositioning. Click **Lock toolbar** and drag the handle to see that the toolbar does not move. Unlock the toolbar to enable movement again.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/floating-toolbar/events/cancel-drag/source.txt)

## Suggested Links

* [API Reference of the FloatingToolBar](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent)
* [Dragging](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/floating-toolbar/dragging)