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

Question

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

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

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

https://jsplumbtoolkit.com/

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

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