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

Тип: IDomEvent

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

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

stop

{} stop()

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

Предыдущая
Следующая