メインコンテンツまでスキップ

Drag event

Drag values

PropertydefaultDescription
deviceType of device
activefalseWhether drag is active.
_activefalseWhether drag is active.
value[0, 0]Current position
_value[0, 0]Previous position
delta[0, 0]Delta of position
offset[0, 0]Offset of position
movement[0, 0]Movement of position
targetnullTarget element

Drag events

Event nameArgumentDescription
onDragDragStateCalled on all drag events. Mainly events specified
onDragStartEventCalled when dragging starts.
onDraggingEventCalled while dragging.
onDragEndEventCalled when dragging ends.
onMountElementCalled when the element is mounted.
onCleannullCalled when the element is unmounted.

Drag state

export type Vec2 = [x: number, y: number]

export interface DragState<El extends Element = Element> {
_active: boolean
active: boolean
device: 'mouse' | 'touch' | 'pointer'
_value: Vec2
value: Vec2
delta: Vec2
offset: Vec2
movement: Vec2
target: El
event: Event
memo: any
isDragStart: boolean
isDragging: boolean
isDragEnd: boolean
onDrag(self: DragState<El>): void
onDragStart(e: Event): void
onDragging(e: Event): void
onDragEnd(e: Event): void
onMount(target: Element): void
onClean(): void
ref(traget: Element): void
}