How to move the background image by clicking and dragging the mouse smoothly?

Question

This is a demo code I'm building to code a map with coordinates. The problem is that when I try to move the map, I don't move it from the point I clicked on to another point that is close to it, and an indication appears on the mouse that looks like I can't drag the image.

I wanted that when the listener mouse down happens then within it there would be an option to move the mouse and there the position of the image would change accordingly and then the mouse up the listeners would be removed

    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';
        }
    
    });