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 до начала работы драггера. Указывается в миллисекундах. |
Параметр | Значение по умолчанию | Описание |
---|---|---|
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. |
Имя | Тип | Описание |
---|---|---|
events | IEventManager | Менеджер событий. Унаследовано от IEventEmitter. |
События
Имя | Описание |
---|---|
move | Изменение положения.
Экземпляр класса Event.
Имена полей, доступных через метод Event.get:
|
start | Начало работы драггера.
Это событие происходит не в момент нажатия, а при первом измении положения после нажатия.
Экземпляр класса Event.
Имена полей, доступных через метод Event.get:
|
stop | Завершение работы драггера.
Это событие не может произойти без события util.Dragger.start.
Экземпляр класса Event.
Имена полей, доступных через метод Event.get:
|
Имя | Описание |
---|---|
move | Изменение положения.
Экземпляр класса Event.
Имена полей, доступных через метод Event.get:
|
start | Начало работы драггера.
Это событие происходит не в момент нажатия, а при первом измении положения после нажатия.
Экземпляр класса Event.
Имена полей, доступных через метод Event.get:
|
stop | Завершение работы драггера.
Это событие не может произойти без события util.Dragger.start.
Экземпляр класса Event.
Имена полей, доступных через метод Event.get:
|
Методы
Имя | Возвращает | Описание |
---|---|---|
destroy() | Останавливает работу драггера и удаляет прослушивание события "mousedown" у элемента autoStartElement. | |
isDragging() | Boolean | Returns работает ли сейчас драггер. |
start(event) | Запускает драггер. Этот метод автоматически вызывается по событию "mousedown" элемента autoStartElement, если он задан. Данный метод можно использовать для инициализации по требованию. К примеру, при получении ответа от сервера или по событию нажатия клавиши клавиатуры. | |
stop() | Останавливает драггер. Этот метод можно использовать для досрочной остановки работы драггера. |
Имя | Возвращает | Описание |
---|---|---|
destroy() | Останавливает работу драггера и удаляет прослушивание события "mousedown" у элемента autoStartElement. | |
isDragging() | Boolean | Returns работает ли сейчас драггер. |
start(event) | Запускает драггер. Этот метод автоматически вызывается по событию "mousedown" элемента autoStartElement, если он задан. Данный метод можно использовать для инициализации по требованию. К примеру, при получении ответа от сервера или по событию нажатия клавиши клавиатуры. | |
stop() | Останавливает драггер. Этот метод можно использовать для досрочной остановки работы драггера. |
Описание событий
move
- position - координаты относительно документа. Массива вида [pageX, pageY];
- delta - разница между положениями текущего и предыдущего события драггера.
start
- position - координаты относительно документа. Массива вида [pageX, pageY];
- delta - разница между положениями текущего и предыдущего события драггера.
stop
- position - координаты относительно документа. Массива вида [pageX, pageY];
- delta - разница между положениями текущего и предыдущего события драггера.
Описание методов
destroy
{} destroy()
Останавливает работу драггера и удаляет прослушивание события "mousedown" у элемента autoStartElement.
isDragging
{Boolean} isDragging()
Returns работает ли сейчас драггер.
start
{} start(event)
Запускает драггер. Этот метод автоматически вызывается по событию "mousedown" элемента autoStartElement, если он задан. Данный метод можно использовать для инициализации по требованию. К примеру, при получении ответа от сервера или по событию нажатия клавиши клавиатуры.
Параметры:
* Обязательный параметр/опция.
stop
{} stop()
Останавливает драггер. Этот метод можно использовать для досрочной остановки работы драггера.