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:
Parameter |
Default value |
Description |
— |
Type: Object Dragger parameters. |
|
— |
Type: HTMLElement|IDomEventEmitter DOM element or implementation of the IDomEventEmitter interface, which starts the dragger when clicked. |
|
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. |
|
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.
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
Name |
Type |
Description |
Event manager. Inherited from IEventEmitter. |
Events
Name |
Description |
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: |
|
Changed position. Instance of the Event class. Names of fields that are available via the Event.get method:
|
|
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:
|
|
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:
|
Methods
Name |
Returns |
Description |
destroy() |
Stops the dragger and deletes listening to the "mousedown" event for the "autoStartElement" event. |
|
Boolean |
Returns whether the dragger is working now. |
|
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:
Parameter |
Default value |
Description |
— |
Type: IDomEvent The event being initialized. |
* Mandatory parameter/option.
stop
{} stop()
Stops the dragger. This method can be used for stopping the dragger prematurely.
Mandatory parameter/option.