Inhalt

Service

CSS Anwendung

Pop Up, Pop down

Schiebung!

Ganz nutzlos war unsere Mauspositions-Anzeige nicht: Wir haben gesehen, dass wir nicht nur die Mauskoordinaten ermitteln können, sondern im gleichen Aufwasch auch noch andere Aufgaben erledigen. Genau das tun wir jetzt: Statt der Positionsanzeige platzieren wir die folgenden, gelb markierten Zeilen in unsere mousePos-Funktion:

// Die Funktion mousePos ermittelt dauernd die Position der Maus
function mousePos(evnt){
  if(evnt) {
    sy = evnt.clientY + window.document.body.scrollTop ;
    sx = evnt.clientX + window.document.body.scrollLeft ;
  }
  else {
    sy = event.y + window.document.body.scrollTop ;
    sx = event.x + window.document.body.scrollLeft ;
  }
  // falls erwünscht, Popup verschieben
  if(movingBox != "") {                // Haben wir ein Fenster zu verschieben?
    var mybox = document.getElementById(movingBox) ;
    mybox.posx = mx - mybox.deltax ;
    mybox.posy = my - mybox.deltay ;
    mybox.style.top = mybox.posy + "px" ;
    mybox.style.left = mybox.posx + "px" ;
  }
}
document.onmousemove = mousePos;

Nun, was bedeutet das genau?

• Zunächst mal sorgt die if-Abfrage dafür, dass die paar folgenden Zeilen nur ausgeführt werden, wenn die Variable movingBox nicht leer ist. So lange sie also leer ist, passiert gar nichts. Es wird unsere Aufgabe sein, beim "Anfassen" unseres Popups dafür zu sorgen, dass der Name (die Id) des Popups in dieser Variablen abgelegt wird.
• document.getElementById haben wir schon angetroffen. Diese Zeile sucht das Popup anhand seiner Id heraus und stellt es unserem Javascript unter dem Namen mybox zur Verfügung.
• In den nächsten beiden Zeilen
  mybox.posx = mx - mybox.deltax ;
mybox.posy = my - mybox.deltay ;
  berechnen wir die neue Position des Popups. Die Position beziehen wir immer auf die linke obere Ecke des HTML-Elements. Nun können wir aber nicht verlangen, dass jemand den Titelbalken genau in jener Ecke anfasst. Wir müssen daher — auch wieder beim "Anfassen" — die horizontale und vertikale Distanz zwischen Mauszeiger und linker oberer Ecke des Popups festhalten. In unserem Fall stehen diese Werte in den Variablen deltax bzw. deltay. Die neue Position des Popups entspricht dann natürlich der Mausposition, korrigiert durch diese beiden Abstände:
  neue_x_position = x_position_der_maus - Abstand_zwischen_maus_und_linkem_rand oder
  mybox.posx      = mx                  - mbox.deltax
• Warum heisst's hier eigentlich
  mybox.posx = mx - mybox.deltax ;
  und nicht einfach nur
  posx = mx - deltax ; ?
  Das sind nun wirklich Feinheiten. Sie sind nötig für das reibungslose Funktionieren, gehen aber auf Grundlagen zurück, die ich in unserer Situation nicht auch noch vollständig nachholen kann. Ich kann dir dazu in bewährter Manier eine Erklärung anbieten.
  X

  Zusatzerklärung

  Sehen wir uns das am Beispiel der Variablen deltax an, die die horizontale Distanz zwischen Mauszeiger und linker oberer Ecke des Popups enthält. Wie wir auf dieser Seite sehen, brauchen wir diese Distanz beim Verschieben des Popups in der Funktion mousePos.

  Ich habe aber auch angekündigt, dass wir den Wert dieser Variablen beim "Anfassen" bestimmen werden. Dieses "Anfassen" wird eine weitere Funktion sein, der wir den Namen anfassen geben werden.

  Nun wird also die Variable deltax an zwei Orten gebraucht: in der Funktion anfassen erhält sie einen Wert, der in der Funktion mouseMove verwendet werden soll. Funktionen sind aber recht ungesellige Kerle. Sie wollen in der Regel nichts voneinander wissen, und wenn eine von ihnen eine Variable (z.B. deltax) besitzt, braucht es besondere Überredungskünste, damit sie diese auch mit andern Funktionen teilt. Wir lösen dieses Problem, indem wir unseren Funktionen höflich aber bestimmt mitteilen, dass deltax nicht ihnen gehört, sondern dem Popup, das wir gerade verschieben möchten, und das durch den Namen mybox repräsentiert wird. Daher die Bezeichnung mybox.deltax — sie gibt der Variablen deltax eine Heimat, in welcher sie von allen Funktionen besucht und verwendet werden kann.

• In den beiden letzten Zeilen verschieben wir nun tatsächlich das Popup an die neu berechneten Koordinaten. Die Positionierung ist etwas, was ins CSS-Gebiet gehört, deshalb werden hier die style-Werte top bzw. left neu gesetzt.

  Ein kleines Detail: Masse, Grössen und Distanzen müssen in CSS ja mit einer Masseinheit versehen werden. Wir geben die Position in "px" an, daher muss der errechnete Wert mit den zwei Buchstaben "px" ergänzt werden.

Die Schwerarbeit, nämlich das Verschieben, ist damit bereits gelöst.

Aber wir haben jetzt gesehen, dass wir beim "Anfassen" die Voraussetzungen schaffen müssen, damit das Verschieben überhaupt möglich wird. Also werden wir uns als nächstes mit dem "Anfassen" auseinandersetzen.