Question

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

https://jsfiddle.net/vaxobasilidze/xhn49e1j/

将任何item拖动到右侧div并将其移出容器外部或右侧或底部。滚动条似乎可以帮助您滚动。这是我想要实现的一个例子。请参阅链接上的第一个图并拖动它：

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

Answer 1

您应该只需要检测鼠标何时关闭，然后当鼠标移动后，您可以存储前一个鼠标坐标并引用当前坐标。最后，您可以根据自上次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;
});

https://jsfiddle.net/6rx30muh/

编辑：修正了拖动时摆动桌子的错误：

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

Answer 2

检查body元素上mousedown和mouseup之间的mousemove是一个很好的起点。

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

通过抓取其背景来拖动div内容

2 个答案: