util.Dragger

Расширяет IEventEmitter.

Специальный инструмент, который предоставляет механизм для реализации перетаскивания элементов на странице.

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

Конструктор

util.Dragger([params])

Параметры:

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

Тип: Object

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

params.autoStartElement

Тип: HTMLElement|IDomEventEmitter

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

params.byRightButton false

Тип: Boolean

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

params.tremor

Тип: Object

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

params.tremor.offset 3

Тип: Number

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

params.tremor.time 500

Тип: Number

Интервал времени после вызова метода start до начала работы драггера. Указывается в миллисекундах.

Пример:

// Пример перетаскивания 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.

События

Имя Описание
move
Изменение положения. Экземпляр класса Event. Имена полей, доступных через метод Event.get:
  • position - координаты относительно документа. Массива вида [pageX, pageY];
  • delta - разница между положениями текущего и предыдущего события драггера.
start
Начало работы драггера. Это событие происходит не в момент нажатия, а при первом измении положения после нажатия. Экземпляр класса Event. Имена полей, доступных через метод Event.get:
  • position - координаты относительно документа. Массива вида [pageX, pageY];
  • delta - разница между положениями текущего и предыдущего события драггера.
stop
Завершение работы драггера. Это событие не может произойти без события util.Dragger.start. Экземпляр класса Event. Имена полей, доступных через метод Event.get:
  • position - координаты относительно документа. Массива вида [pageX, pageY];
  • delta - разница между положениями текущего и предыдущего события драггера.

Методы

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

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

isDragging()

Boolean

Returns работает ли сейчас драггер.

start(event)

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

stop()

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

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

move

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

start

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

stop

Завершение работы драггера. Это событие не может произойти без события util.Dragger.start. Экземпляр класса Event. Имена полей, доступных через метод Event.get:
  • position - координаты относительно документа. Массива вида [pageX, pageY];
  • delta - разница между положениями текущего и предыдущего события драггера.

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

destroy

{} destroy()

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

isDragging

{Boolean} isDragging()

Returns работает ли сейчас драггер.

start

{} start(event)

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

Параметры:

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

Тип: DomEvent

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

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

stop

{} stop()

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