Dynamisches HTML: Drag and Drop

SELFHTML aktuell Artikel Dynamisches HTML
	Dynamisches HTML: Drag and Drop
	Daniel Thoma Hinweise zum Thema Beispiel und Erläuterungen Weiterführende Links

Daniel Thoma

E-Mail:	dthoma@gmx.net
Homepage-URL:

Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!

Das Verschieben von Seitenelementen kann ein hübsches Feature Ihrer Homepage darstellen. Sie können Ihrem Besucher ermöglichen, z.B. Elemente mit Zusatzinformationen beliebig zu positionieren. Das folgende Drag-And-Drop-Script für den MS Internet Explorer und Mozilla demonstriert Ihnen die Verfahrensweise.

Programmiertechnische Grundlagen

Um Seitenelemente verschieben zu können, benötigen Sie Informationen über die aktuelle Position der Maus und wann das Element im Dokument abgelegt werden soll.
Die aktuelle Position der Maus erhalten Sie, durch die Überwachung der Mausbewegung mit dem Eventhandler onmousemove. Den Moment der Ablage liefert Ihnen der Eventhandler onmouseup. Tritt das Ereignis Mausbewegung oder Loslassen der Maustaste ein, so wird von dem entsprechenden Eventhandlern eine verarbeitende Funktion aufgerufen. Innerhalb dieser Funktion können Sie - falls erforderlich - auf die Eigenschaften des Event-Objektes zugreifen und den gewünschten Effekt erzeugen.

Beispiel und Erläuterungen

Beispiel:

Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
<!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4

//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;

// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;

// Mausposition
var posx = 0;
var posy = 0;


function draginit() {
 // Initialisierung der Überwachung der Events

  document.onmousemove = drag;
  document.onmouseup = dragstop;
}


function dragstart(element) {
   //Wird aufgerufen, wenn ein Objekt bewegt werden soll.

  dragobjekt = element;
  dragx = posx - dragobjekt.offsetLeft;
  dragy = posy - dragobjekt.offsetTop;
}


function dragstop() {
  //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.

  dragobjekt=null;
}


function drag(ereignis) {
  //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.

  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  if(dragobjekt != null) {
    dragobjekt.style.left = (posx - dragx) + "px";
    dragobjekt.style.top = (posy - dragy) + "px";
  }
}
//-->
</script>
</head>
<body onload="draginit()">
<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div>
<div onmousedown="dragstart(this)" style="position:absolute;top:200px;left:0px;height:100px;width:100px;background:#00ff00"> </div>
</body>
</html>

Erläuterung:

Nach dem Laden des Dokumentes wird die Funktion draginit() aufgerufen. Diese Funktion initialisiert die Eventüberwachung und ordnet den Eventhandler onmouseup die Funktion dragstop() und dem Eventhandler onmousemove die Funktion drag() zu.

Jeder Bewegung der Maus führt zum Aufruf der Funktion drag(). Innerhalb der Funktion wird in den Variablen posx und posy die aktuelle Mausposition relativ zur oberen, rechten Ecke des Fensters gespeichert. Solange in der Variablen dragobjekt der Wert null gespeichert ist, passiert nichts weiter. Erst im weiteren Verlauf wird der zweite Teil des Funktion wirksam.

Im Dokument sind zwei Div-Bereiche definiert, welche verschiebbar sein sollen. Im Div-Tag jedes dieser Bereiche ist der Eventhandler onmousedown notiert. Dieser Eventhandler tritt dann in Aktion, wenn auf dem Element eine Maustaste gedrückt wird und ruft die Funktion dragstart() auf. Als Parameter wird das aktuelle Element mittels this übergeben.

Der Aufruf der Funktion dragstart() bewirkt, dass in der Variablen dragobjekt das aktive Element gespeichert wird. Gleichzeitig wird in den Variablen dragx und dragy die Klickposition relativ zur oberen, rechten Ecke des angeklickten Objekts abgelegt.

Jede weitere Mausbewegung führt nun dazu, dass auch der zweite Teil der Funktion drag() abgearbeitet wird. Hier wird das aktive Element durch Änderung der Style-Eigenschaften top und left positioniert.

Läßt der Anwender die Maustaste los, so wird die Funktion dragstop() aufgerufen. Hier wird die Variable dragobjekt mit dem Wert null belegt und das zu verschiebende Objekt bleibt an der zuletzt eingenommenen Position liegen.

Weiterführende Links

Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.

Event-Handler
Event-Objekt
Drag and Drop im Netscape der Version 4