如何通过鼠标点击并拖动来平滑移动背景图片？

Question

这是我正在构建的演示代码，用于编写带有坐标的地图。问题是，当我尝试移动地图时，我不会将其从单击的点移动到靠近它的另一个点，并且鼠标上会出现一个指示，看起来我无法拖动图像.

我希望当监听器鼠标按下时，其中会有一个移动鼠标的选项，并且图像的位置会相应改变，然后鼠标向上监听器将被删除

    var scale = 1;
    var offsetX = 0;
    var offsetY = 0;
    var pinSize = 20;
    var pinPosition = { top: 12, left: 50 };

    window.addEventListener("load", () => {
        var imageContainer = document.getElementById('image-container');
    var mapImage = document.getElementById('map-image');
    var mapPin = document.getElementById('map-pin');
        imageContainer.style.cursor = 'grab';
        imageContainer.style.userSelect = 'none';
        mapImage.style.height = window.innerHeight + 'px';
        mapImage.style.width = window.innerWidth + 'px';
        mapPin.style.left = ((pinPosition.left / 100) * window.innerWidth) + 'px';
        mapPin.style.top = ( (pinPosition.top / 100) * window.innerWidth) + 'px';
        
        imageContainer.addEventListener('mousedown', function(e) {
            if (e.button === 0) {
                var startX = e.clientX - offsetX;
                var startY = e.clientY - offsetY;
                function move(e) {
                    var newX = e.clientX - startX;
                    var newY = e.clientY - startY;  
                    imageContainer.style.transition = 'none';
             if((((newX <= ((window.innerWidth*scale)-window.innerWidth)/2) && (newX > 0)) || ((newX >= ((window.innerWidth*scale)-window.innerWidth)/-2) && (newX < 0))) && (((newY <= ((window.innerHeight*scale)-window.innerHeight)/2) && (newY > 0)) || ((newY >= ((window.innerHeight*scale)-window.innerHeight)/-2) && (newY < 0)))){
                mapImage.style.transform = 'translate(' + newX + 'px, ' + newY + 'px) scale(' + scale + ')';
                updatePinPosition(newX, newY);
             } 
                }
    
                function stopMove() {
                    imageContainer.removeEventListener('mousemove', move);
                    imageContainer.removeEventListener('mouseup', stopMove);
                    imageContainer.style.cursor = 'grab';
                    imageContainer.style.transition = '';
                }
    
                imageContainer.addEventListener('mousemove', move);
                imageContainer.addEventListener('mouseup', stopMove);
                imageContainer.style.cursor = 'grabbing';
            }
        });
    
        imageContainer.addEventListener('wheel', function(e) {
            var delta = e.deltaY;
            if (delta > 0) {
                scale *= 1.1;
            } else {
                scale = 1;
            }
            mapImage.style.height = window.innerHeight + 'px';
            mapImage.style.width = window.innerWidth + 'px';
            mapImage.style.transform = 'translate(' + offsetX + 'px, ' + offsetY + 'px) scale(' + scale + ')';
            updatePinPosition(offsetX, offsetY);
        });
    
        function updatePinPosition(x, y) {
            var pinTop = (((pinPosition.top / 100) * window.innerWidth * scale) - (((window.innerHeight * scale) - (window.innerHeight)) / 2) );
            var pinLeft = ((pinPosition.left / 100) * window.innerWidth);
            mapPin.style.top = (pinTop + y) + 'px';
            mapPin.style.left = (pinLeft + x) + 'px';
            mapPin.style.width = (pinSize + (pinSize * scale - pinSize)) + 'px';
            mapPin.style.height = (pinSize + (pinSize * scale - pinSize)) + 'px';
        }
    
    });

    

Answer 1

背景图像是使用 .container 元素上的 CSS 设置的。 JavaScript 代码用于处理 .container 元素上的鼠标事件（mousedown、mousemove、mouseup），以计算背景图像的平移（移动）。

mousedown 事件设置一个标志来指示拖动已经开始，并记录初始鼠标位置和容器位置。 mousemove 事件根据当前鼠标位置和初始鼠标位置之间的差异计算平移，并相应更新容器的变换以移动背景图像。

mouseup 事件将拖动标志设置为 false，表示拖动已停止。