# PanGesture ## APIs PanGesture\(options?: \{ fingers?: number, direction?: PanDirection, distance?: number \} | [PanGestureOption](#section14214195212149)\) - Parameters

Name	Type	Mandatory	Default Value	Description
fingers	number	No	1	Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10.
direction	PanDirection	No	All	Slide direction. The enumerated value supports the AND (&) and OR (\|) operations.
distance	number	No	5.0	Minimum slide recognition distance, in vp.

- PanDirection enums

Name	Description
All	All directions.
Horizontal	Horizontal slide.
Vertical	Vertical slide.
Left	Slide to the left.
Right	Slide to the right.
Up	Slide up.
Down	Slide down.
None	Slide disabled.

### PanGestureOption The attributes of the slide gesture recognizer can be dynamically modified using the **PanGestureOption** AP. This avoids modifying attributes through status variables, which will cause the UI to be refreshed. PanGestureOption\(options?: \{ fingers?: number, direction?: PanDirection, distance?: number \}\) - Parameters For details, see the parameter description of [PanGesture](#li118312377710). - APIs

Name	Description
setDirection(value: PanDirection)	Sets the direction.
setDistance(value: number)	Sets the distance.
setFingers(value: number)	Sets the number of fingers.

## Events

Name		Description
onActionStart((event?: GestureEvent) => void)		Callback for the pan gestures reorganization event.
onActionUpdate((event?: GestureEvent) => void)		Callback for the pan gesture movement event.
onActionEnd((event?: GestureEvent) => void)		Callback for fingers pick-up.
onActionCancel(event: () => void)		Callback for the touch cancellation event.

## Example ``` @Entry @Component struct PanGestureExample { @State offsetX: number = 0 @State offsetY: number = 0 build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) } .height(100).width(200).padding(20).border({ width: 1 }).margin(80) .translate({ x: this.offsetX, y: this.offsetY, z: 5 }) .gesture( PanGesture({}) .onActionStart((event: GestureEvent) => { console.info('Pan start') }) .onActionUpdate((event: GestureEvent) => { this.offsetX = event.offsetX this.offsetY = event.offsetY }) .onActionEnd(() => { console.info('Pan end') }) ) } } ``` ![](figures/pangesture.gif)