如何通过拖动而不是使用滚动条来滚动 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。基本上，滚动功能的行为方式与谷歌地图在您单击并拖动时的行为方式相同。有人能帮我解决这个问题吗？提前致谢！

注意

就鼠标操作而言，按下相当于单击此处，只是为了清楚起见。我也只在 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>

Answer 2

我发现了这个不错的 JQuery 插件（不确定您是否可以使用 JQuery）

http://digitalillusion.altervista.org/wordpress/pages/dragscroller/viewport-test.html