如何拖动以滚动图像？

问题描述

试图拖动以滚动工作。它适用于div集合，但是尝试将其用于图像时出了点问题。

我需要取消某种活动吗？似乎有默认的图像拖动行为妨碍了操作。

使用铬。

https://jsfiddle.net/dqsabu40/78/

 <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,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;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）