Events
The FloatingToolBar fires events in response to dragging.
Drag Events
The FloatingToolBar exposes the following events for drag and position changes:
dragStart—Fires when a pointer drag begins. The event is cancelable throughevent.preventDefault().move—Fires whenever the position of the FloatingToolBar changes as a result of a pointer drag.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.
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.