如何通过拖动而非使用滚动条在div中滚动

Question

如何通过拖动而非使用滚动条在div中滚动

13

我正在开发一个使用触摸屏界面的项目。我有一个较小的 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。基本上，滚动功能将表现为当您在Google Maps中单击并拖动时所做的方式。有人可以帮忙吗？提前感谢！

注意

就鼠标操作而言，这里的“pressing”等同于“clicking”，只是为了明确起见。此外，我仅在Firefox中工作，因此跨浏览器兼容性不是问题。

- EJay

你的HTML缺少第二个</div>。 - gen_Eric

你还需要在div2的CSS中加入overflow:scroll; :P - Joseph Marikle

滚动条出现了，所以它实际上不需要。无论如何还是谢谢。 - EJay

啊...那一定是Chrome的问题。它只是溢出了，没有显示滚动条。 - Joseph Marikle

明白了，我只在火狐浏览器上工作。我会把这个加到问题里。 - EJay

2个回答

0

我发现了一个不错的 JQuery 插件（不确定您是否愿意使用 JQuery）

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

- Kenny Cason

jQuery不是一个选项。感谢您的回复。 - EJay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robot Woods · Accepted Answer

这可以工作...我在您引用 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>