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

【问题标题】：Drag div content by grabbing its background通过抓取背景来拖动 div 内容
【发布时间】：2017-12-05 08:10:53
【问题描述】：

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

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

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

https://jsplumbtoolkit.com/

关于如何做到这一点的任何提示？

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案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;
            });

【讨论】：

感谢您的回复。这就是我想要的！
小细节，我可以反转这个滚动吗？例如，如果我将鼠标向右移动，内容应该向右移动，就像在演示中显示的那样（见链接）
当然只要把e.clientX - prevCoords.x改成prevCoords.x - e.clientX IE把计算中的减法顺序倒过来。旁注您需要在移动项目时禁用它，因为它会使用户体验不利于拖动。
知道了！为了最终完成并明确答案，还有一个问题。当内容已经被拖动并且我尝试再次拖动它时，内容的“窗口”会跳转到 [0,0] 坐标。有没有办法解决这个问题？
我用摆动表修复了这个错误并编辑了你的答案。感谢您的帮助。

【解决方案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。