Javascript 如何拖动以滚动图像？

正在尝试拖动以滚动工作。对于div集合来说，它工作得很好，但是当试图将其用于图像时，出现了一些问题

有什么活动我需要取消吗？似乎存在默认的图像拖动行为

使用铬

 <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" />
    </div>
    
    <div id="container2" class="px-8 overflow-scroll" style="height: 32rem;">
        <div class="bg-gray-100 border border-gray-400 flex items-center justify-center text-4xl w-full h-48 my-8">1</div>
        <div class="bg-gray-100 border border-gray-400 flex items-center justify-center text-4xl w-full h-48 my-8">2</div>
        <div class="bg-gray-100 border border-gray-400 flex items-center justify-center text-4xl w-full h-48 my-8">3</div>
        <div class="bg-gray-100 border border-gray-400 flex items-center justify-center text-4xl w-full h-48 my-8">4</div>
        <div class="bg-gray-100 border border-gray-400 flex items-center justify-center text-4xl w-full h-48 my-8">5</div>
        <div class="bg-gray-100 border border-gray-400 flex items-center justify-center text-4xl w-full h-48 my-8">6</div>
        <div class="bg-gray-100 border border-gray-400 flex items-center justify-center text-4xl w-full h-48 my-8">7</div>
        <div class="bg-gray-100 border border-gray-400 flex items-center justify-center text-4xl w-full h-48 my-8">8</div>
        <div class="bg-gray-100 border border-gray-400 flex items-center justify-center text-4xl w-full h-48 my-8">9</div>
        <div class="bg-gray-100 border border-gray-400 flex items-center justify-center text-4xl w-full h-48 my-8">10</div>
    </div>

document.addEventListener('DOMContentLoaded', function() {
    const ele = document.getElementById('container');
    ele.style.cursor = 'grab';

    let pos = { top: 0, left: 0, x: 0, y: 0 };

    const mouseDownHandler = function(e) {
        ele.style.cursor = 'grabbing';
        ele.style.userSelect = 'none';

        pos = {
            left: ele.scrollLeft,
            top: ele.scrollTop,
            // Get the current mouse position
            x: e.clientX,
            y: e.clientY,
        };
                
        
        document.addEventListener('mousemove', mouseMoveHandler);
        document.addEventListener('mouseup', mouseUpHandler);
    };

    const mouseMoveHandler = function(e) {
        // How far the mouse has been moved
        const dx = e.clientX - pos.x;
        const dy = e.clientY - pos.y;

                
        // Scroll the element
        ele.scrollTop = pos.top - dy;
        ele.scrollLeft = pos.left - dx;
    };

    const mouseUpHandler = function() {
        ele.style.cursor = 'grab';
        ele.style.removeProperty('user-select');
                
        
        document.removeEventListener('mousemove', mouseMoveHandler);
        document.removeEventListener('mouseup', mouseUpHandler);
    };

    // Attach the handler
    ele.addEventListener('mousedown', mouseDownHandler);
});

document.addEventListener('DOMContentLoaded', function() {
    const ele = document.getElementById('container2');
    ele.style.cursor = 'grab';

    let pos = { top: 0, left: 0, x: 0, y: 0 };

    const mouseDownHandler = function(e) {
        ele.style.cursor = 'grabbing';
        ele.style.userSelect = 'none';

        pos = {
            left: ele.scrollLeft,
            top: ele.scrollTop,
            // Get the current mouse position
            x: e.clientX,
            y: e.clientY,
        };
                
        
        document.addEventListener('mousemove', mouseMoveHandler);
        document.addEventListener('mouseup', mouseUpHandler);
    };

    const mouseMoveHandler = function(e) {
        // How far the mouse has been moved
        const dx = e.clientX - pos.x;
        const dy = e.clientY - pos.y;

                
        // Scroll the element
        ele.scrollTop = pos.top - dy;
        ele.scrollLeft = pos.left - dx;
    };

    const mouseUpHandler = function() {
        ele.style.cursor = 'grab';
        ele.style.removeProperty('user-select');
                
        
        document.removeEventListener('mousemove', mouseMoveHandler);
        document.removeEventListener('mouseup', mouseUpHandler);
    };

    // Attach the handler
    ele.addEventListener('mousedown', mouseDownHandler);
});

#container, #container2 {
  height: 500px;
  display:inline-block;
  margin-left 10px;
  width: 500px;
  overflow-y: scroll;
  overflow-x: scroll;
  border: 1px solid black;
  cursor: grab;
}

.bg-gray-100 {
  height: 400px;
  margin-top: 20px;
  background-color: lightgray;
  width: 2000px;
}