# ElementDragHelper

Class · extends [`EventHandler`](https://api.playcanvas.com/engine/classes/EventHandler.md) · category: User Interface

Source: https://github.com/playcanvas/engine/blob/b5b983982a9860d21e0c1dafb2f85f72e2c01afb/src/framework/components/element/element-drag-helper.js#L32

Helper class that makes it easy to create Elements that can be dragged by the mouse or touch.

## Constructors

### constructor

```ts
new ElementDragHelper(element: ElementComponent, axis?: string)
```

Create a new ElementDragHelper instance.

**Parameters**

- `element` ([`ElementComponent`](https://api.playcanvas.com/engine/classes/ElementComponent.md)): The Element that should become draggable.
- `axis` (`string`, optional): Optional axis to constrain to, either 'x', 'y' or null.

## Events

### EVENT_DRAGEND

```ts
static EVENT_DRAGEND: string = 'drag:end'
```

Fired when the current new drag operation ends.

**Example**

```ts
elementDragHelper.on('drag:end', () => {
    console.log('Drag ended');
});
```

### EVENT_DRAGMOVE

```ts
static EVENT_DRAGMOVE: string = 'drag:move'
```

Fired whenever the position of the dragged element changes. The handler is passed the
current [Vec3](https://api.playcanvas.com/engine/classes/Vec3.md) position of the dragged element.

**Example**

```ts
elementDragHelper.on('drag:move', (position) => {
    console.log(`Dragged element position is ${position}`);
});
```

### EVENT_DRAGSTART

```ts
static EVENT_DRAGSTART: string = 'drag:start'
```

Fired when a new drag operation starts.

**Example**

```ts
elementDragHelper.on('drag:start', () => {
    console.log('Drag started');
});
```

## Inherited from [EventHandler](https://api.playcanvas.com/engine/classes/EventHandler.md)

- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`