Как прокрутить div, перетаскивая, а не используя полосы прокрутки - PullRequest
Новая
       7

Как прокрутить div, перетаскивая, а не используя полосы прокрутки

9 голосов
/ 02 августа 2011

Я работаю над проектом, в котором используется интерфейс с сенсорным экраном.У меня есть 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.По сути, функция прокрутки будет вести себя так же, как карты Google, когда вы нажимаете и перетаскиваете ее.Кто-нибудь может мне помочь с этим?Заранее спасибо!

Примечание

С точки зрения действий мыши нажатие эквивалентно нажатию здесь, просто чтобы прояснить ситуацию.Я также работаю только в Firefox, поэтому кросс-браузерная совместимость не является проблемой.

Ответы [ 2 ]

8 голосов
/ 02 августа 2011

Это работает ... Я начал делать это для мобильного сафари, прежде чем вы упомянули 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>
0 голосов
/ 02 августа 2011

Я нашел этот хороший плагин JQuery (не уверен, что вы хорошо используете JQuery или нет)

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

...