Документация
Справочник JavaScript API
2.1.64 (текущая версия)
collection
interactivityModel
Интерфейсы

util.Dragger

Расширяет IEventEmitter.

Специальный инструмент, который предоставляет механизм для реализации перетаскивания элементов на странице. При использовании следует обратить внимание, что во время работы драггера в системе событий API Яндекс.Карт не будут поступать события mousemove и mouseup.

Конструктор | Поля | События | Методы

Конструктор

util.Dragger([params])

Параметры:

ПараметрЗначение по умолчаниюОписание
params

Тип: Object

Параметры драггера.

params.autoStartElement

Тип: HTMLElement|IDomEventEmitter

DOM-элемент или реализация интерфейса IDomEventEmitter, нажатие на который запустит драггер.

params.byRightButton false

Тип: Boolean

Для начала работы драггера при помощи параметра 'autoStartElement' используется правая кнопка мыши. На устройствах без поддержки мыши перетаскивание правой кнопкой не будет работать.

params.tremor 3

Тип: Number

Минимальное смещение в пикселях от стартовой точки, необходимое для запуска драггера.

Пример:

// Пример перетаскивания DOM-элемента на карту.
// На месте отпускания DOM-элемента создается Placemark.
var myMap = new ymaps.Map('map', {center: [35.76, 37.67], zoom: 5}),
// У DOM-элемента должно быть выставлено CSS-свойство 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);
        // Получаем географические координаты по точке окончания работы драггера.
        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';
}

Поля

ИмяТипОписание
events IEventManager

Менеджер событий.

Унаследовано от IEventEmitter.

События

ИмяОписание
cancel

Отмена работы драггера. Это событие происходит если драггер прекратил свою работу без отправки события util.Dragger.start. К примеру, если было прекращено нажатие без смещения. Экземпляр класса Event. Имена полей, доступных через метод Event.get:

move

Изменение положения. Экземпляр класса Event. Имена полей, доступных через метод Event.get:

  • position - координаты относительно документа. Массива вида [pageX, pageY];
  • delta - разница между положениями текущего и предыдущего события драггера.

start

Начало работы драггера. Это событие происходит не в момент нажатия, а при первом измении положения после нажатия. Экземпляр класса Event. Имена полей, доступных через метод Event.get:

  • position - координаты относительно документа. Массива вида [pageX, pageY];

stop

Завершение работы драггера. Это событие не может произойти без события util.Dragger.start. Экземпляр класса Event. Имена полей, доступных через метод Event.get:

  • position - координаты относительно документа. Массива вида [pageX, pageY];
  • delta - разница между положениями текущего и предыдущего события драггера.

Методы

ИмяВозвращаетОписание
destroy()

Останавливает работу драггера и удаляет прослушивание события "mousedown" у элемента autoStartElement.

isDragging()

Boolean

Возвращает работает ли сейчас драггер.

start(event)

Запускает драггер. Этот метод автоматически вызывается по событию "mousedown" элемента autoStartElement, если он задан. Данный метод можно использовать для инициализации по требованию. К примеру, при получении ответа от сервера. Для корректной работы при инициализации по требованию необходимо чтобы передаваемое событие поддерживало поле 'position' в методе get.

stop()

Останавливает драггер. Этот метод можно использовать для досрочной остановки работы драггера.

Описание событий

cancel

Отмена работы драггера. Это событие происходит если драггер прекратил свою работу без отправки события util.Dragger.start. К примеру, если было прекращено нажатие без смещения. Экземпляр класса Event. Имена полей, доступных через метод Event.get:

move

Изменение положения. Экземпляр класса Event. Имена полей, доступных через метод Event.get:

  • position - координаты относительно документа. Массива вида [pageX, pageY];
  • delta - разница между положениями текущего и предыдущего события драггера.

start

Начало работы драггера. Это событие происходит не в момент нажатия, а при первом измении положения после нажатия. Экземпляр класса Event. Имена полей, доступных через метод Event.get:

  • position - координаты относительно документа. Массива вида [pageX, pageY];

stop

Завершение работы драггера. Это событие не может произойти без события util.Dragger.start. Экземпляр класса Event. Имена полей, доступных через метод Event.get:

  • position - координаты относительно документа. Массива вида [pageX, pageY];
  • delta - разница между положениями текущего и предыдущего события драггера.

Описание методов

destroy

{} destroy()

Останавливает работу драггера и удаляет прослушивание события "mousedown" у элемента autoStartElement.

isDragging

{Boolean} isDragging()

Возвращает работает ли сейчас драггер.

start

{} start(event)

Запускает драггер. Этот метод автоматически вызывается по событию "mousedown" элемента autoStartElement, если он задан. Данный метод можно использовать для инициализации по требованию. К примеру, при получении ответа от сервера. Для корректной работы при инициализации по требованию необходимо чтобы передаваемое событие поддерживало поле 'position' в методе get.

Параметры:

ПараметрЗначение по умолчаниюОписание
event *
[no-highlight[

* Обязательный параметр/опция.

]no-highlight]

Тип: IDomEvent

Инициализирующее событие.

* Обязательный параметр/опция.

stop

{} stop()

Останавливает драггер. Этот метод можно использовать для досрочной остановки работы драггера.