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()

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

Была ли статья полезна?

util.cursor.Manager

util.extend