Javascript-форум - Функция как в картах Гугл и Яндекс

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Функция как в картах Гугл и Яндекс (https://javascript.ru/forum/misc/82826-funkciya-kak-v-kartakh-gugl-i-yandeks.html)

Функция как в картах Гугл и Яндекс

Я не знаю как правильно называется это функция, но смысл ее заключается в том что когда зажимаешь клик на карте то карту можно перемешать в любое направление.

И вот нужно сделать так что бы фоновая картинка тоже меняла свою позицию в зависимости от того куда я ее перемещаю с помощью зажатого клика.
Возможно есть какие то готовые библиотеки или решение не такое сложное как я думаю, прошу помощи.

Возможно лучше сделать что бы картинка была не фоне а просто картинкой, я не знаю.

<!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>index</title>
    <style>
        body{
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;;
        }
        .blok{
            max-width: 1200px;
            margin: 0 auto;
            display:flex;
            flex-direction: column;
            align-items: center;
        }
        .podpis{
            display: block;
        }
        .fertezj{
            width: 1000px;
            height: 600px;
            background-image: url(https://rakipov.ru/files/fon3.png);
            background-repeat: no-repeat;
            background-position: center;
            cursor: crosshair;
            -webkit-box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            -moz-box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            border: 4px solid rgba(34, 60, 80, 0.9);
        }
    </style>
</head>

<body>
    <div class="blok">
        <p class="podpis">
            Размер блока 1000*600<br> 
            Размер фоновое изображение 2000*2000
        </p>
        <div class="fertezj"></div>
    </div>
</body>
</html>

рони,
Спасибо это интересная функция я сохранил.

Но мне нужно не то.
Я не знаю как можно объяснить.
Вот карты https://yandex.ru/maps/54/yekaterinb...56.851369&z=12
И если один раз кликнуть и зажать то можно перетаскивать эту карту.

Цитата:

Сообщение от Сергей Ракипов

можно перетаскивать эту карту.

код выше позволяет это сделать ... сами, либо ждите.

Цитата:

Сообщение от рони (Сообщение 538646)

код выше позволяет это сделать ... сами, либо ждите.

Спасибо у меня не получатся сообразить как из этого кода сделать то что мне нужно

просмотр перетаскиванием

Сергей Ракипов,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <style>
        body{
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;;
        }
        .blok{
            max-width: 1200px;
            margin: 0 auto;
            display:flex;
            flex-direction: column;
            align-items: center;
        }
        .podpis{
            display: block;
        }
        .fertezj{
            width: 500px;
            height: 300px;
            cursor: crosshair;
            overflow: hidden;
            -webkit-box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            -moz-box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            border: 4px solid rgba(34, 60, 80, 0.9);
            touch-action :none;
        }
        .fertezjХ img{
            width: 2000px;
            height: 2000px;
        }

    </style>
</head>

<body>
    <div class="blok">
        <p class="podpis">
            Размер блока 500*300<br>
            Размер фоновое изображение 2000*2000
        </p>
        <div class="fertezj"><img src="https://rakipov.ru/files/fon3.png" alt=""></div>
    </div>
<script>
   document.addEventListener( "DOMContentLoaded" , function() {

    document.querySelectorAll('.fertezj').forEach(el => {
    let _startX, _startY, _scrollLeft, _scrollTop;


    const pointerHandler = (event) => {
        const { screenX, screenY } = event;

        if(event.type === "pointerdown") {
            document.addEventListener("pointermove", pointerHandler);
            document.addEventListener("pointerup", pointerHandler);

            _startX = screenX;
            _startY = screenY;

            _scrollLeft = el.scrollLeft;
            _scrollTop = el.scrollTop;
        }

        if(event.type === "pointerup") {
            document.removeEventListener("pointermove", pointerHandler);
            document.removeEventListener("pointerup", pointerHandler);
        }

        if(event.type === "pointermove") {
            const dx = (screenX - _startX);
            const dy = (screenY - _startY);

            el.scrollTo(
                _scrollLeft - dx,
                _scrollTop - dy
            );
        }

        event.preventDefault();
    }

    el.addEventListener("pointerdown", pointerHandler);
    el.querySelector("img").addEventListener("load", _ => el.scrollTo(
                700,
                750
            ))
    })

        });
</script>
</body>
</html>

рони,
Как всегда признателен, большое спасибо за помощь.

Скажите а что это часть кода значит

el.addEventListener( "pointerdown", pointerHandler );
                el.querySelector( "img" ).addEventListener( "load", _ => el.scrollTo(
                    700,
                    750
                ) )
            } )

И еще сейчас проверил на мобильной телефоне. В моей голове зажатый клик и зажатый палец на экране это одно и тоже.

Но на телефоне не работает, но то есть как не работает, вроде картинку двигает но делает это плохо. Вот загрузил себе на сайт.

https://rakipov.ru/testik/map/

Цитата:

Сообщение от Сергей Ракипов

что это часть кода значит

пытка вывести картинку по её центру)))

Цитата:

Сообщение от Сергей Ракипов

Но на телефоне не работает, но то есть как не работает, вроде картинку двигает но делает это плохо.

Для того, что бы срабатывало на сенсорных экранах, добавить в CSS после строки 29

touch-action :none;