---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/util.Dragger.md
  - https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/util.Dragger.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt

# util.Dragger

Extends [IEventEmitter](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventEmitter.md).

A special tool that provides a mechanism for dragging page elements. When using it, note that the mousemove and mouseup events will not register in the Yandex Maps API events system when working with the dragger.

[Constructor](#constructor-summary) | [Fields](#properties-summary) | [Events](#events-summary) | [Methods](#methods-summary)

## Constructor {#constructor-summary}

```javascript
util.Dragger([params])
```

**Parameters:**

#|
|| **Parameter** | **Default value** | **Description**  ||
|| [`params`](#param-params) | — | Type: Object

Dragger parameters. ||
|| [`params.autoStartElement`](#param-params.autoStartElement) | — | Type: HTMLElement\|[IDomEventEmitter](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md)

DOM element or implementation of the IDomEventEmitter interface, which starts the dragger when clicked. ||
|| [`params.byRightButton`](#param-params.byRightButton) | false | Type: Boolean

The right mouse button is used for starting the dragger using the 'autoStartElement' parameter. Dragging with the right button won't work on devices without mouse support. ||
|| [`params.tremor`](#param-params.tremor) | 3 | Type: Number

The minimum distance in pixels from the starting point necessary for starting the dragger. ||
|#


**Example:**

```javascript
// Example of dragging a DOM element to the map.
// A placemark is created where the DOM element is released.
var myMap = new ymaps.Map('map', {center: [35.76, 37.67], zoom: 5});
// The DOM element must have the CSS property position: absolute.
var element = document.getElementById('someId');
var dragger = new ymaps.util.Dragger({
    autoStartElement: element
});
var draggerEventsGroup = dragger.events.group();

draggerEventsGroup
    .add('start', function (event) {
        var pos = event.get('position');
        positionElement(pos[0], pos[1]);
        console.log('start');
    })
    .add('move', function (event) {
        var pos = event.get('position');
        positionElement(pos[0], pos[1]);
        console.log('move');
    })
    .add('stop', function (event) {
        draggerEventsGroup.removeAll();
        element.parentElement.removeChild(element);
        // Getting geographical coordinates at the point where the dragger stopped.
        var placemarkPosition = myMap.options.get('projection').fromGlobalPixels(
            myMap.converter.pageToGlobal(event.get('position')),
            myMap.getZoom()
        );
        myMap.geoObjects.add(
            new ymaps.Placemark(placemarkPosition)
        );
        console.log('stop');
    });

function positionElement (x, y) {
    element.style.left = x + 'px';
    element.style.top = y + 'px';
}
```

## Fields {#properties-summary}

#|
|| **Name** | **Type** | **Description** ||
|| [events](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventEmitter.md#events) | [IEventManager](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventManager.md) | Event manager.

Inherited from [IEventEmitter](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventEmitter.md#events). ||
|#

## Events {#events-summary}

#|
|| **Name** | **Description** ||
|| [cancel](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/util.Dragger.md#event-cancel) | Cancels the dragger. This event occurs if the dragger stopped without sending the util.Dragger.start event. For example, if the click stopped without moving the mouse. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. Names of fields that are available via the [Event.get](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md#get) method: ||
|| [move](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/util.Dragger.md#event-move) | Changed position. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. Names of fields that are available via the [Event.get](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md#get) method: 
- position - Coordinates relative to the document. Array in the format [pageX, pageY].
- delta - The difference between the locations of the current and previous dragger events. ||
|| [start](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/util.Dragger.md#event-start) | The dragger starts working. This event does not occur at the time of pressing, but at the first change to the position after pressing. Instance of the Event class. Names of fields that are available via the [Event.get](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md#get) method: 
- position - Coordinates relative to the document. Array in the format [pageX, pageY]. ||
|| [stop](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/util.Dragger.md#event-stop) | The dragger stops working. This event cannot occur without the util.Dragger.start event. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. Names of fields that are available via the [Event.get](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md#get) method: 
- position - Coordinates relative to the document. Array in the format [pageX, pageY].
- delta - The difference between the locations of the current and previous dragger events. ||
|#

## Methods {#methods-summary}

#|
|| **Name** | **Returns** | **Description** ||
|| [destroy](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/util.Dragger.md#destroy)() | | Stops the dragger and deletes listening to the "mousedown" event for the "autoStartElement" event. ||
|| [isDragging](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/util.Dragger.md#isDragging)() | Boolean | Returns whether the dragger is working now. ||
|| [start](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/util.Dragger.md#start)([event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/util.Dragger.md#start-param-event)) | |  Launches the dragger. This method is automatically called on the "mousedown" event for autoStartElement, if set. This method can be used for on-demand initialization. For example, when getting a response from the server. For correct functioning during on-demand initialization, the passed event must support the "position" field in the "get" method. ||
|| [stop](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/util.Dragger.md#stop)() | | Stops the dragger. This method can be used for stopping the dragger prematurely. ||
|#

## Events details {#event_detail}

### cancel {#cancel}

Cancels the dragger. This event occurs if the dragger stopped without sending the util.Dragger.start event. For example, if the click stopped without moving the mouse. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. Names of fields that are available via the [Event.get](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md#get) method:

### move {#move}

Changed position. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. Names of fields that are available via the [Event.get](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md#get) method: 
- position - Coordinates relative to the document. Array in the format [pageX, pageY].
- delta - The difference between the locations of the current and previous dragger events.

### start {#start}

The dragger starts working. This event does not occur at the time of pressing, but at the first change to the position after pressing. Instance of the Event class. Names of fields that are available via the [Event.get](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md#get) method: 
- position - Coordinates relative to the document. Array in the format [pageX, pageY].

### stop {#stop}

The dragger stops working. This event cannot occur without the util.Dragger.start event. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. Names of fields that are available via the [Event.get](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md#get) method: 
- position - Coordinates relative to the document. Array in the format [pageX, pageY].
- delta - The difference between the locations of the current and previous dragger events.

## Methods details {#method_detail}

### destroy {#destroy}

```javascript
{} destroy()
```

Stops the dragger and deletes listening to the "mousedown" event for the "autoStartElement" event.

### isDragging {#isDragging}

```javascript
{Boolean} isDragging()
```

**Returns** whether the dragger is working now.

### start {#start}

```javascript
{} start(event)
```

Launches the dragger. This method is automatically called on the "mousedown" event for autoStartElement, if set. This method can be used for on-demand initialization. For example, when getting a response from the server. For correct functioning during on-demand initialization, the passed event must support the "position" field in the "get" method.

**Parameters:**

#|
|| **Parameter** | **Default value** | **Description**  ||
|| [`event`](#start-param-event)[*](*star) | — | Type: [IDomEvent](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEvent.md)

The event being initialized. ||
|#

\* Mandatory parameter/option.

### stop {#stop}

```javascript
{} stop()
```

Stops the dragger. This method can be used for stopping the dragger prematurely.

[*star]: Mandatory parameter/option.