Documentation
Reference
2.1.50 (current version)
collection
interactivityModel
Interfaces

util.Dragger

Extends IEventEmitter.

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 | Fields | Events | Methods

Constructor

util.Dragger([params])

Parameters:

ParameterDefault valueDescription
params

Type: Object

Dragger parameters.

params.autoStartElement

Type: HTMLElement|IDomEventEmitter

DOM element or implementation of the IDomEventEmitter interface, which starts the dragger when clicked.

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 3

Type: Number

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

Example:

// 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.
    element = document.getElementById('someId'),
    dragger = new ymaps.util.Dragger({
        autoStartElement: element
    }),
    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

NameTypeDescription
eventsIEventManager

Event manager.

Inherited from IEventEmitter.

Events

NameDescription
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 class. Names of fields that are available via the Event.get method:

move

Changed position. Instance of the Event class. Names of fields that are available via the Event.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

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 method:

  • position - Coordinates relative to the document. Array in the format [pageX, pageY].

stop

The dragger stops working. This event cannot occur without the util.Dragger.start event. Instance of the Event class. Names of fields that are available via the Event.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

NameReturnsDescription
destroy()

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

isDragging()

Boolean

Returns whether the dragger is working now.

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.

stop()

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

Events details

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 class. Names of fields that are available via the Event.get method:

move

Changed position. Instance of the Event class. Names of fields that are available via the Event.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

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 method:

  • position - Coordinates relative to the document. Array in the format [pageX, pageY].

stop

The dragger stops working. This event cannot occur without the util.Dragger.start event. Instance of the Event class. Names of fields that are available via the Event.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

destroy

{} destroy()

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

isDragging

{Boolean} isDragging()

Returns whether the dragger is working now.

start

{} 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:

ParameterDefault valueDescription
event*
[no-highlight[

* Mandatory parameter/option.

]no-highlight]

Type: IDomEvent

The event being initialized.

* Mandatory parameter/option.

stop

{} stop()

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