如何通过拖动而不是使用滚动条滚动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,我希望能够通过按(因为它是一个触摸屏)滚动div2一个未占用的屏幕部分并沿着div拖动.基本上,滚动功能的行为与谷歌地图在您单击并拖动时的行为方式相同.任何人都可以帮我吗？提前致谢!

注意

在鼠标操作方面,按下相当于单击此处,只是为了清楚.我也只在Firefox工作,因此跨浏览器兼容性不是问题.

Answer 1

这很有效......在你引用FireFox之前我已经开始制作它用于移动游猎了...所以它可能有一些额外的......

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>