util.Dragger
Расширяет IEventEmitter.
Специальный инструмент, который предоставляет механизм для реализации перетаскивания элементов на странице. При использовании следует обратить внимание, что во время работы драггера в системе событий API Яндекс Карт не будут поступать события mousemove и mouseup.
Конструктор | Поля | События | Методы
Конструктор
util.Dragger([params])
Параметры:
Параметр |
Значение по умолчанию |
Описание |
|
— |
Тип: Object Параметры драггера. |
||
— |
Тип: HTMLElement |
DOM-элемент или реализация интерфейса IDomEventEmitter, нажатие на который запустит драггер. |
|
false |
Тип: Boolean Для начала работы драггера при помощи параметра 'autoStartElement' используется правая кнопка мыши. На устройствах без поддержки мыши перетаскивание правой кнопкой не будет работать. |
||
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';
}
Поля
Имя |
Тип |
Описание |
Менеджер событий. Унаследовано от IEventEmitter. |
События
Имя |
Описание |
Отмена работы драггера. Это событие происходит если драггер прекратил свою работу без отправки события util.Dragger.start. К примеру, если было прекращено нажатие без смещения. Экземпляр класса Event. Имена полей, доступных через метод Event.get: |
|
Изменение положения. Экземпляр класса Event. Имена полей, доступных через метод Event.get:
|
|
Начало работы драггера. Это событие происходит не в момент нажатия, а при первом измении положения после нажатия. Экземпляр класса Event. Имена полей, доступных через метод Event.get:
|
|
Завершение работы драггера. Это событие не может произойти без события util.Dragger.start. Экземпляр класса Event. Имена полей, доступных через метод Event.get:
|
Методы
Имя |
Возвращает |
Описание |
destroy() |
Останавливает работу драггера и удаляет прослушивание события "mousedown" у элемента autoStartElement. |
|
Boolean |
Возвращает работает ли сейчас драггер. |
|
Запускает драггер. Этот метод автоматически вызывается по событию "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.
Параметры:
Параметр |
Значение по умолчанию |
Описание |
— |
Тип: IDomEvent Инициализирующее событие. |
* Обязательный параметр/опция.
stop
{} stop()
Останавливает драггер. Этот метод можно использовать для досрочной остановки работы драггера.
Обязательный параметр.