--- metadata: - name: generator content: Diplodoc Platform v5.39.1 alternate: - https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/dragger.md - https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/dragger.md --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt # Использование драггера Open in CodeSandbox
ready, Map, map.Container, map.Converter, IProjection, util.Dragger, Circle

В данном примере драггер используется для перетаскивания HTML-элемента "#marker". Этот HTML-элемент был передан как значение опции autoStartElement. Драггер автоматически запускается по событию mousedown элемента autoStartElement. Есть возможность инициализировать работу драггера вручную при помощи метода start(). Драггер прекращает работу по событию mouseup документа, но можно досрочно прекратить работу драггера методом stop().

Все события драггера содержат поля 'position' и 'delta', которые позволяют узнать текущее положение курсора и смещение текущего положения относительно последнего события драггера. В примере по событию stop происходит перевод положения маркера в геокоординаты, если драггер прекратил работу над картой.

{% list tabs %} - index.html ```html Использование драггера

Перетащите метку на карту

food-pin
``` - dragger.js ```js jQuery(function () { ymaps.ready(init); }); function init() { var map = new ymaps.Map( "map", { center: [55.819543, 37.611619], zoom: 10, }, { searchControlProvider: "yandex#search", } ), markerElement = jQuery("#marker"), dragger = new ymaps.util.Dragger({ // Драггер будет автоматически запускаться при нажатии на элемент 'marker'. autoStartElement: markerElement[0], }), // Смещение маркера относительно курсора. markerOffset, markerPosition; dragger.events .add("start", onDraggerStart) .add("move", onDraggerMove) .add("stop", onDraggerEnd); function onDraggerStart(event) { var offset = markerElement.offset(), position = event.get("position"); // Сохраняем смещение маркера относительно точки начала драга. markerOffset = [ position[0] - offset.left, position[1] - offset.top, ]; markerPosition = [ position[0] - markerOffset[0], position[1] - markerOffset[1], ]; applyMarkerPosition(); } function onDraggerMove(event) { applyDelta(event); } function onDraggerEnd(event) { applyDelta(event); markerPosition[0] += markerOffset[0]; markerPosition[1] += markerOffset[1]; // Переводим координаты страницы в глобальные пиксельные координаты. var markerGlobalPosition = map.converter.pageToGlobal(markerPosition), // Получаем центр карты в глобальных пиксельных координатах. mapGlobalPixelCenter = map.getGlobalPixelCenter(), // Получением размер контейнера карты на странице. mapContainerSize = map.container.getSize(), mapContainerHalfSize = [ mapContainerSize[0] / 2, mapContainerSize[1] / 2, ], // Вычисляем границы карты в глобальных пиксельных координатах. mapGlobalPixelBounds = [ [ mapGlobalPixelCenter[0] - mapContainerHalfSize[0], mapGlobalPixelCenter[1] - mapContainerHalfSize[1], ], [ mapGlobalPixelCenter[0] + mapContainerHalfSize[0], mapGlobalPixelCenter[1] + mapContainerHalfSize[1], ], ]; // Проверяем, что завершение работы драггера произошло в видимой области карты. if (containsPoint(mapGlobalPixelBounds, markerGlobalPosition)) { // Теперь переводим глобальные пиксельные координаты в геокоординаты с учетом текущего уровня масштабирования карты. var geoPosition = map.options .get("projection") .fromGlobalPixels(markerGlobalPosition, map.getZoom()), // Получаем уровень зума карты. zoom = map.getZoom(), // Получаем координаты тайла. tileCoordinates = getTileCoordinate( markerGlobalPosition, zoom, 256 ); alert( [ "Координаты: " + geoPosition, "Уровень зума: " + zoom, "Глобальные пиксельные координаты: " + markerGlobalPosition, "Координаты тайла: " + tileCoordinates, ].join(" ") ); } } function applyDelta(event) { // Поле 'delta' содержит разницу между положениями текущего и предыдущего события драггера. var delta = event.get("delta"); markerPosition[0] += delta[0]; markerPosition[1] += delta[1]; applyMarkerPosition(); } function applyMarkerPosition() { markerElement.css({ left: markerPosition[0], top: markerPosition[1], }); } function containsPoint(bounds, point) { return ( point[0] >= bounds[0][0] && point[0] <= bounds[1][0] && point[1] >= bounds[0][1] && point[1] <= bounds[1][1] ); } function getTileCoordinate(coords, zoom, tileSize) { return [ Math.floor((coords[0] * zoom) / tileSize), Math.floor((coords[1] * zoom) / tileSize), ]; } } ``` {% endlist %}