EventsPremium
The FloatingToolbar fires events in response to dragging, programmatic moves, and resizing of the hosted Toolbar.
Drag Events
The FloatingToolbar exposes the following events for drag and position changes:
onDragStart—Fires when a pointer drag or the keyboard Move mode begins. The event is cancelable throughevent.preventDefault().onMove—Fires whenever the position of the FloatingToolbar changes as a result of a pointer drag, the keyboard Move mode, or thesetPositionmethod.onDragEnd—Fires when a pointer drag ends or the keyboard Move mode exits.
Each event includes the top and left coordinates of the FloatingToolbar for that stage of the interaction. The onDragStart event reports the starting position, onMove reports the updated positions, and onDragEnd reports the final position. The drag flag is true for pointer moves and false for keyboard Move mode or programmatic setPosition calls.
The following example logs drag start, end, and position changes. Drag the toolbar to see the event entries.
Resize Event
The onResize event is forwarded from the hosted Toolbar and fires when a window resize changes the Toolbar's dimensions. The event includes the hosted Toolbar's offsetWidth and offsetHeight.
Canceling a Drag Operation
Call event.preventDefault() in the onDragStart handler to cancel the operation. When canceled, neither onMove nor onDragEnd fires for that interaction.
The following demo lets you lock the toolbar to prevent repositioning. Click Lock and try to drag the handle or enter the keyboard Move mode to see that the toolbar does not move. Click Unlock to enable movement again.