Question

I am working on a project that uses a touch-screen interface. I have a div inside of a smaller div, so the smaller div has scroll bars to access the rest of the first div. Here is the basic code for it.

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

and the html is:

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

Using javascript, I would like to be able to scroll through div2 by pressing (since it is a touch screen) an unoccupied part of the screen and dragging along the div. Basically, the scroll feature would behave the way google maps does when you click and drag in it. Can anybody help me with this? Thanks in advance!

Note

In terms of mouse actions, pressing is equivalent to clicking here, just to be clear. I am also working in Firefox only, so cross-browser compatibility is not an issue.

Answer 1

This works…I’d started making it for mobile safari before you cited FireFox…so it may have a little extra…

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>