Javascript 通过抓取div内容的背景来拖动它

当内容超出div时，我们使用滚动条查看它。如何通过抓取并拖动div内容的背景来滚动div内容？我搜索了解决方案，但没有找到我需要的。这是我的小提琴：

将任何

项

拖动到右侧div，并将其移到容器外部的右侧或底部。显示滚动条以帮助您滚动。下面是我想要实现的一个例子。请参见链接上的第一个图表并将其拖动：

---

有关如何执行此操作的任何提示？

检查mousedown和mouseup之间的mousemove，body元素上的mouseup是一个很好的开始

  element = $('body');
element.addEventListener("mousedown", function(){
 flag = 0;
  }, false);
 element.addEventListener("mousemove", function(){
    flag = 1;
   }, false);
    element.addEventListener("mouseup", function(){
      if(flag === 0){
       console.log("click");
      }
    else if(flag === 1){
        console.log("drag");
   }
  }, false);

---

您只需要检测鼠标何时按下，然后鼠标何时移动，就可以存储以前的鼠标坐标并参考当前坐标。最后，您可以根据上次mousemove调用后的拖动差异，滚动有问题的div

var mouseDown = false;
var prevCoords = { x: 0, y: 0 };

$("#mainDiv").mousedown(function() {
  mouseDown = true;
}).mousemove(function(e) {
  var currentScrollX = $('#mainDiv').scrollLeft();
  var currentScrollY = $('#mainDiv').scrollTop();
  if(mouseDown) { 
    $('#mainDiv').scrollLeft(currentScrollX + prevCoords.x - (e.clientX + currentScrollX))
    $('#mainDiv').scrollTop(currentScrollY + prevCoords.y - e.clientY)
  };
  prevCoords.x = e.clientX + currentScrollX;
  prevCoords.y = e.clientY;
}).mouseup(function() {
  mouseDown = false;
});

编辑：修复了拖动时摆动表格的错误：

            var mouseDown = false;
            var prevCoords = { x: 0, y: 0 };

            $("#mainDiv").mousedown(function() {
                mouseDown = true;
            }).mousemove(function(e) {
                var currentScrollX = $('#mainDiv').scrollLeft();
                var currentScrollY = $('#mainDiv').scrollTop();
                if(mouseDown) { 
                    $('#mainDiv').scrollLeft(currentScrollX + prevCoords.x - e.clientX)
                    $('#mainDiv').scrollTop(currentScrollY + prevCoords.y - e.clientY)
                };
                prevCoords.x = e.clientX;
                prevCoords.y = e.clientY;
            }).mouseup(function() {
                mouseDown = false;
            });

---

谢谢你的回复。是的，我可以捕捉到这些事件，但我需要知道如何通过抓取滚动div。感谢您的回复。这就是我想要的！只是一个小细节，我能反转这个滚动吗？例如，如果我将鼠标向右移动，内容应该向右移动，就像演示中显示的那样（请参见链接），请确保只需将

e.clientX-prevCoords.x

更改为

prevCoords.x-e.clientX

即在计算中颠倒减法顺序。侧注：移动项目时，您需要禁用它，因为这会使拖动变得不好。明白了！为了最终完成并澄清答案，还有一个问题。当内容已经被拖动并且我再次尝试拖动它时，内容的“窗口”跳到[0,0]坐标。我修好了程序错误，编辑了你的答案。谢谢你的帮助。