--- 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/en/llms.txt # Using the dragger Open in CodeSandbox
ready, Map, map.Container, map.Converter, IProjection, util.Dragger, Circle

In this example, the dragger is used for dragging the "#marker" HTML element. This HTML element was passed as the value of the autoStartElement option. The dragger is automatically started on the mousedown event of the autoStartElement. It is possible to initialize the dragger manually using the start() method. The dragger stops on the mouseup event of the document, but it is possible to terminate the dragger earlier using the stop() method.

All dragger events contain the fields 'position' and 'delta', which tell us the current cursor position and the offset of the current position relative to the last dragger event. In the example, when the stop event occurs, the marker position is converted to geocoordinates if the dragger has stopped working on the map.

{% list tabs %} - index.html ```html Examples. Using the dragger.

Dragging the placemark to the map

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({ // Dragger will automatically run when the user clicks on the 'marker' element. autoStartElement: markerElement[0], }), // The offset of the marker relative to the cursor. markerOffset, markerPosition; dragger.events .add("start", onDraggerStart) .add("move", onDraggerMove) .add("stop", onDraggerEnd); function onDraggerStart(event) { var offset = markerElement.offset(), position = event.get("position"); // Saving the offset of the marker relative to the drag starting point. 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]; // Converting page coordinates to global pixel coordinates. var markerGlobalPosition = map.converter.pageToGlobal(markerPosition), // Getting the center of the map in global pixel coordinates. mapGlobalPixelCenter = map.getGlobalPixelCenter(), // Getting the size of the map container on the page. mapContainerSize = map.container.getSize(), mapContainerHalfSize = [ mapContainerSize[0] / 2, mapContainerSize[1] / 2, ], // Calculating the map boundaries in global pixel coordinates. mapGlobalPixelBounds = [ [ mapGlobalPixelCenter[0] - mapContainerHalfSize[0], mapGlobalPixelCenter[1] - mapContainerHalfSize[1], ], [ mapGlobalPixelCenter[0] + mapContainerHalfSize[0], mapGlobalPixelCenter[1] + mapContainerHalfSize[1], ], ]; // Checking that the dragger finished working in a visible area of the map. if (containsPoint(mapGlobalPixelBounds, markerGlobalPosition)) { // Now we'll convert the global pixel coordinates to geocoordinates with the current zoom level of the map. var geoPosition = map.options .get("projection") .fromGlobalPixels(markerGlobalPosition, map.getZoom()); alert(geoPosition.join(" ")); } } function applyDelta(event) { // The 'delta' field contains the difference between the positions of the current and previous dragger events. 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] ); } } ``` {% endlist %}