EventDispatcher → Controls →

# DragControls

This class can be used to provide a drag'n'drop interaction.

## Code Example

    const controls = new DragControls( objects, camera, renderer.domElement );
    // add event listener to highlight dragged objects
    controls.addEventListener( 'dragstart', function ( event ) {
    	event.object.material.emissive.set( 0xaaaaaa );
    } );
    controls.addEventListener( 'dragend', function ( event ) {
    	event.object.material.emissive.set( 0x000000 );
    } );

## Import

DragControls is an addon, and must be imported explicitly, see Installation#Addons.

    import { DragControls } from 'three/addons/controls/DragControls.js';

## Constructor

### new DragControls ( objects : Array.<Object3D>, camera : Camera, domElement : HTMLElement )

Constructs a new controls instance.

objects | An array of draggable 3D objects.
camera | The camera of the rendered scene.
domElement | The HTML DOM element used for event listeners. Default is `null`.

## Properties

### .objects : Array.<Object3D>

An array of draggable 3D objects.

### .raycaster : Raycaster

The raycaster used for detecting 3D objects.

### .recursive : boolean

Whether children of draggable objects can be dragged independently from their parent.

Default is `true`.

### .rotateSpeed : number

The speed at which the object will rotate when dragged in `rotate` mode. The higher the number the faster the rotation.

Default is `1`.

### .transformGroup : boolean

This option only works if the `objects` array contains a single draggable group object. If set to `true`, the controls does not transform individual objects but the entire group.

Default is `false`.

## Events

### .drag

Fires when the user drags a 3D object.

##### Type:

- Object

### .dragend

Fires when the user has finished dragging a 3D object.

##### Type:

- Object

### .hoveroff

Fires when the pointer is moved out of a 3D object.

##### Type:

- Object

### .hoveron

Fires when the pointer is moved onto a 3D object, or onto one of its children.

##### Type:

- Object

## Source

examples/jsm/controls/DragControls.js