javascript - 如何通过拖动而不是使用滚动条来滚动 div

Question

我正在从事一个使用触摸屏界面的项目。我在一个较小的 div 中有一个 div，所以较小的 div 有滚动条来访问第一个 div 的其余部分。这是它的基本代码。

.div1{
      height: 100px;
      width: 100px;
}
.div2{
      height: 50px;
      width: 50px;
}

html 是:

<div id = "div2" class="div2">
 <div id="div1" class="div1"></div>
</div>

使用 javascript，我希望能够通过按下(因为它是触摸屏)屏幕上未被占用的部分并沿着 div 拖动来滚动浏览 div2。基本上，当您单击并拖动它时，滚动功能的行为方式与谷歌地图的行为方式相同。有人可以帮我吗？提前致谢!

注意事项

在鼠标 Action 方面，按下相当于点击这里，只是说清楚。我也只在 Firefox 中工作，所以跨浏览器兼容性不是问题。

Answer 1

这行得通......在你引用 FireFox 之前，我已经开始为移动 safari 制作它......所以它可能有一点额外......

var _startX = 0;
var _startY = 0;
var _offsetX = 0;			
var _offsetY = 0;
var _dragElement;
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;

function OnMouseDown(event){
  document.onmousemove = OnMouseMove;
    _startX = event.clientX;
  _startY = event.clientY;
  _offsetX = document.getElementById('div1').offsetLeft;
  _offsetY = document.getElementById('div1').offsetTop;
  _dragElement = document.getElementById('div1');

}

function OnMouseMove(event){
    _dragElement.style.left = (_offsetX + event.clientX - _startX) + 'px';
  _dragElement.style.top = (_offsetY + event.clientY - _startY) + 'px';
}

function OnMouseUp(event){
  document.onmousemove = null;
  _dragElement=null;
}

.div1{position:absolute; height:500px; width: 500px; z-index:1; background-color:red;}
.div2{position:absolute; top:100px; left:100px; height:100px; width:100px; z-index:2; overflow:hidden; display:block;}

<div class="div2" id="div2">
  <div class="div1" id="div1">
  </div>
</div>