Event Handlers
ES Drager provides a rich set of event handlers to help you build interactive interfaces.
Basic Events
| Event | Type | Description |
|---|---|---|
onClick | () => void | Called when the element is clicked |
onBlur | () => void | Called when the element loses focus |
Drag Events
| Event | Type | Description |
|---|---|---|
onDragStart | () => void | Called when dragging begins |
onDrag | (position: { x: number; y: number }) => void | Called continuously while dragging with current position |
onDragEnd | (position: { x: number; y: number }) => void | Called when dragging ends with final position |
Transform Events
| Event | Type | Description |
|---|---|---|
onRotate | (rotation: number) => void | Called when rotation changes with current angle in degrees |
onScale | (scale: number) => void | Called when scale changes with current scale factor |
onResize | (size: { width: number; height: number }) => void | Called when size changes with new dimensions |
Connection Events
| Event | Type | Description |
|---|---|---|
onConnect | (connection: { sourceId: string; sourceAnchor: string; targetId: string; targetAnchor: string }) => void | Called when a connection is established between two elements |
Usage Example
<Drager
onClick={() => console.log('clicked')}
onDragStart={() => console.log('drag started')}
onDrag={(pos) => console.log('dragging at:', pos)}
onDragEnd={(pos) => console.log('dropped at:', pos)}
onRotate={(angle) => console.log('rotated to:', angle)}
onResize={(size) => console.log('resized to:', size)}
onConnect={(connection) => console.log('connected:', connection)}
>
Content
</Drager>