输入范围缩放后如何在大图像上拖动和平移？

Question

因此，我有一个较大的地图文件（只是一个大图像），在页面加载时显示为100％，然后有一个范围滑块可以放大和缩小，我可以正常工作。但是，我不确定在放大图像后如何添加平移（用鼠标单击和拖动）。用户放大后如何向图像添加平移？如果可能的话，也可以使用鼠标左键或单击并按住滚轮进行拖动。

我进行了一些搜索，但没有找到将其与范围滑块配合使用或使用jQuery的示例。我只想使用香草JS。

css

        #map {
            cursor: grab;
            width: 100%;
            min-width: 100%;
            max-width: 8500px;
        }

        #map-slider-div {
            position: fixed;
            bottom: 15px;
            width: 100%;
            text-align: center;
        }

        #map-div {
            text-align: center;
        }

html

    <div id="map-div">
        <img id="map" src="worldmap.png" alt="">
    </div>

    <div id="map-slider-div">
        <input id="map-slider" type="range" min="300" max="8500" value="300">
    </div>

JS

    const init = () => {
        let mapSlider = document.querySelector('#map-slider');
        mapSlider.addEventListener('change', zoomMap);
    }

    const zoomMap = () => {
        let map = document.querySelector('#map');
        let mapSliderVal = document.querySelector('#map-slider').value;
        map.style.width = mapSliderVal + 'px';
    }

    window.onload = init;

谢谢！

Answer 1

有点像我想要的那样工作，新的init方法：

    const init = () => {

        let mapSlider = document.querySelector('#map-slider');
        mapSlider.addEventListener('change', zoomMap);

        let map = document.querySelector('#map');
        let mapDiv = document.querySelector('#map-div');
        map.addEventListener('mousedown', start_drag);
        mapDiv.addEventListener('mousemove', while_drag);
        mapDiv.addEventListener('mouseup', stop_drag);

        var img_ele = null,
            x_cursor = 0,
            y_cursor = 0,
            x_img_ele = 0,
            y_img_ele = 0;

        function start_drag() {
            img_ele = this;
            x_img_ele = window.event.clientX - map.offsetLeft;
            y_img_ele = window.event.clientY - map.offsetTop;
        }

        function stop_drag() {
            img_ele = null;
        }

        function while_drag() {
            var x_cursor = window.event.clientX;
            var y_cursor = window.event.clientY;
            if (img_ele !== null) {
                img_ele.style.left = (x_cursor - x_img_ele) + 'px';
                img_ele.style.top = (window.event.clientY - y_img_ele) + 'px';

                console.log(img_ele.style.left + ' - ' + img_ele.style.top);

            }
        }

    }

但是有某种方式我可以做到，因此图像不能移离屏幕边缘吗？如果您位于图片的底部并尝试缩小，则地图有时会消失。还是以某种方式重置缩放图像的坐标？

编辑：也回答了这个……反正足够近了。在每次缩放时重置图像的顶部和左侧，这样就永远不会完全看不见：

const zoomMap = () => {
        let map = document.querySelector('#map');
        map.style.top = 0;
        map.style.left = 0;
        let mapSliderVal = document.querySelector('#map-slider').value;
        map.style.width = mapSliderVal + 'px';
    }

虽然会喜欢它放大和缩小当前/最后一个位置。由于某种原因，它总是放大到左上角？