Skip to content
Documentation/MoveDragDirective

Search documentation

Type to search the documentation.

Reference

MoveDragDirective

Makes the element draggable with pointer events, with optional axis lock, constraints, snap points and momentum.

Overview

Makes the element draggable with pointer events, with optional axis lock, constraints, snap points and momentum.

Experimental API — may change significantly between minor versions.

  • Kind: Directive
  • Stability: experimental

Selector

[moveDrag]

Inputs

Input Type Default Required Description
moveDrag unknown true Transform (inline function); reads as MoveDragAxis.
moveDragConstraints MoveDragConstraints | undefined undefined
moveDragElastic unknown 0.5 Transform numberAttribute; reads as number.
moveDragMomentum unknown false Transform booleanAttribute; reads as boolean.
moveDragSnapToOrigin unknown false Transform booleanAttribute; reads as boolean.
moveDragSnapPoints readonly MoveDragSnapPoint[] | undefined undefined
moveSpring MoveSpring | undefined undefined
moveWhileDrag MoveKeyframes | undefined undefined State held while a drag is active, e.g. { scale: [1, 1.05] } — the "lift the card" gesture. Only transform channels are supported; the drag owns translate.

Outputs

Output Payload Description
moveDragStart MoveDragEvent
moveDragMove MoveDragEvent
moveDragEnd MoveDragEvent

Public methods

onPointerDown

onPointerDown(e: PointerEvent): void
Parameter Type Optional Description
e PointerEvent

onPointerMove

onPointerMove(e: PointerEvent): void
Parameter Type Optional Description
e PointerEvent

onPointerUp

onPointerUp(e: PointerEvent): void
Parameter Type Optional Description
e PointerEvent