---
title: Touch Gestures
---

Allows you to easily use some of the most common Touch Gestures like - tap, hold, drag, swipe, pinch/stretch and zoom.

## tap

Put and lift the finger from the screen quickly

Usage

```ts
touchGestures.tap(tapOptions)
```

### tapOptions

```ts
interface TapOptions {
    element: HTMLElement | string;
    callback: Function;
    tapsNumber?: number;
    tapTime?: number;
    betweenTapsTime?: number;
}
```

#### element

Type:

```ts
type element = string | HTMLElement
```

The element or element selector to attach the tap.

#### callback

Type:

```ts
type callback = () => void;
```

The function called on tap

#### tapsNumber

Type:

```ts
type tapsNumber = number
```

`default = 1`

The number of taps to trigger the callback

#### tapTime

Type:

```ts
type tapTime = number
```

`default = 200`

Time in milliseconds between putting down and lifting the finger from the screen.

#### betweenTapsTime

Type:

```ts
type betweenTapsTime = number
```

`default = 500`

Time in milliseconds between sequential taps.

## hold

Put and lift the finger after a set amount of time

Usage

```ts
touchGestures.hold(holdOptions)
```

### holdOptions

```ts
interface HoldOptions {
    element: HTMLElement | string;
    callback: Function;
    time?: number;
}
```

#### element

Type:

```ts
type element = string | HTMLElement
```

The element or element selector to attach the hold.

#### callback

Type:

```ts
type callback = () => void;
```

The function called when the hold time is up.

#### time

Type:

```ts
type time = number
```

`default = 1000`

Time in milliseconds for the hold to complete.

## drag

Put a finger on the screen and move it around to drag. Drag stops when the finger is lifted.

Usage

```ts
touchGestures.drag(dragOptions)
```

### dragOptions

```ts
interface DragOptions {
    element: HTMLElement | string;
    onDragStart?: (event: GestureEventData) => void;
    onDrag?: (position: { x: number, y: number }) => void;
    onDragEnd?: (position: { x: number, y: number }) => void;
}

interface GestureEventData {
    x: number;
    y: number;
    target: EventTarget | null;
    currentTarget: EventTarget | null;
}
```

#### element

Type:

```ts
type element = string | HTMLElement
```

The element or element selector to attach the drag.

#### onDragStart

Type:

```ts
type onDragStart = (event: GestureEventData) => void;
```

The function called when you start dragging

#### onDrag

Type:

```ts
type onDrag = (position: { x: number, y: number }) => void;
```

The function called when you drag

#### onDragEnd

Type:

```ts
type onDragEnd = (position: { x: number, y: number }) => void;
```

The function called when you stop dragging

## swipe

Put a finger on the screen and move it in a set direction quickly and then lift it

Usage

```ts
touchGestures.swipe(swipeOptions)
```

### swipeOptions

```ts
type GestureDirection = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

interface SwipeOptions {
    element: HTMLElement | string;
    callback: (direction?: GestureDirection) => void;
    touchNumber?: number;
}
```

#### element

Type:

```ts
type element = string | HTMLElement
```

The element or element selector to attach the swipe.

#### callback

Type:

```ts
type callback = (direction?: GestureDirection) => void;
```

The function called when the swipe is done.

The direction of the swipe can be the following: `top`, `bottom`, `left`, `right`, `top-left`, `top-right`, `bottom-left` and `bottom-right`

#### touchNumber

Type:

```ts
type touchNumber = number
```

`default = 1`

The number of fingers required to perform the swipe.

## pinch

Put two fingers on the screen and start moving them in opposite directions. Bring them together to pinch and apart to stretch.

Usage

```ts
touchGestures.pinch(pinchOptions)
```

### pinchOptions

```ts
interface PinchOptions {
    element: HTMLElement | string;
    callback: ({ pinchDelta, midpoint }: { pinchDelta: number, midpoint: { x: number, y: number } }) => void;
}
```

#### element

Type:

```ts
type element = string | HTMLElement
```

The element or element selector to attach the pinch.

#### callback

Type:

```ts
type callback = ({ pinchDelta, midpoint }: { pinchDelta: number, midpoint: { x: number, y: number } }) => void;
```

The function called on pinch/stretch. The `pinchDelta` is either `40` for stretching or `-40` for pinching. The `midpoint` is the point between the two fingers.

## rotate

Put two fingers on the screen and start moving them in a clockwise or counter-clockwise direction.

Usage

```ts
touchGestures.rotate(rotateOptions)
```

### rotateOptions

```ts
interface RotateOptions {
    element: HTMLElement | string;
    callback: (angle: number) => void;
}
```

#### element

Type:

```ts
type element = string | HTMLElement
```

The element or element selector to attach the rotate.

#### callback

Type:

```ts
type callback = (angle: number) => void;
```

The function called on rotate. Provides an angle between 0 and 360 degrees.


## Removing gestures

To remove a gesture you will need to save it to a variable and then call the `remove()` method.

For Example

```ts
const tap = touchGestures.tap({
    element: '.tap-container',
    callback: () => {}
})

tap.remove();
```

## Enabling touch gestures for the other Interaction Manager modules

Touch gestures are available in the other IM modules, however they need to be enabled. The process for each one is the same, you just need to do `IMmodule.touchEnabled = true` to enable them. Or set it to `false` to disable them.

For Example

```ts
const square = new draggable({ element: '.square' });

square.touchEnabled = true // You can now drag the square around using your fingers

square.touchEnabled = false // To remove the touch events
```