Wie, um einen Bildlauf durch ein div-Element durch ziehen und nicht durch die Verwendung der Bildlaufleisten

Arbeite ich an einem Projekt, das mit einer touch-screen-interface. Ich habe ein div in einer kleineren div, so wird die kleinere der div-scroll-Balken, um Zugriff auf den rest des ersten div. Hier ist die basic-code für es.

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

und der html-Code:

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

Mit javascript, ich möchte in der Lage sein, um einen Bildlauf durch div2 durch drücken (da es ein touch-screen), einen freien Teil des Bildschirms und ziehen entlang der div. Im Grunde, wird der Bildlauf-Funktion Verhalten würde, wie google maps funktioniert, wenn Sie klicken und ziehen Sie es. Kann jemand mir helfen mit diesem? Vielen Dank im Voraus!

Hinweis

In Bezug auf Aktionen mit der Maus, drücken entspricht klicken Sie hier, nur um klar zu sein. Ich arbeite auch in Firefox nur, also cross-browser-Kompatibilität ist kein Thema.

  • Ihnen fehlt ein 2. </div> in den HTML-Code.
  • ich reparierte es. cheers.
  • Sie müssen auch overflow:scroll; in der div2 css 😛
  • Der scroll-Balken zeigen, bis, ohne dass, so dass es eigentlich gar nicht brauche. Trotzdem danke aber.
  • ah... muss man chrome dann. es ist einfach überläuft und nicht show scroll bars
  • Got ya. Ich arbeite im firefox nur. Ich will hinzufügen, dass zu der Frage.

InformationsquelleAutor EJay | 2011-08-02
  1. 8

    Das funktioniert...ich hatte angefangen, es für mobile safari, bevor Sie zitiert FireFox...also kann es ein wenig mehr haben...

    JS:

    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;
}

    CSS:

    .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;}

    HTML:

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

    • Sie können hinzufügen, einige Qualifikanten, so dass es kann nicht gescrollt werden, aus der Sicht
    • Schön. Hast du das aus einem tutorial online, durch Zufall? Ich habe fast die exakt gleichen code für die Tasten ich bin die Platzierung in der div aber ich war nicht sicher, ob es funktionieren würde, für ein div. Auch, wenn ich diese aufrufen von javascript und wollte nicht Platz das JS in meine html -, würde document.getElementById("div1") die gleiche wie nur mit Dokument? Danke für die Antwort!
    • irgendwann ja, aber für diese war ich so ziehen sich zurück aus meinen Projekten...ich denke es war von developer.apple.com. Ich habe gerade gegoogelt _dragElement und fand dieses scheint sehr ähnlich zu sein, so bin ich sicher, dass ich dies Lesen, oder jemand elses port (wenn diese nicht kopieren jemand anderes selbst 🙂 ): luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx (ich in der Regel nicht verwenden Sie den Unterstrich, wenn die Auswahl Variablennamen)
    • Sie können immer noch document.getElementById bei der Verwendung einer separaten JS-Datei
    • Perfekt. Danke.
    InformationsquelleAutor Robot Woods
  2. 0

    Fand ich diese nette JQuery-plugin (Nicht sicher, wenn Sie ok mit der Verwendung von JQuery oder nicht)

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

    • JQuery ist keine option. Danke für die Antwort obwohl.
    • kein problem. Ich dachte 🙂
    InformationsquelleAutor Kenny Cason
Schreibe einen Kommentar