JavaScript/Anwendung und Praxis/Drag and Drop

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zum Autor

Name:
Daniel Thoma
E-Mail:

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 demonstriert Ihnen die Verfahrensweise.

Empfehlung: Verwenden Sie für ihre Projekte die Drag & Drop-API, die nativen Browser-Support bietet und viel weniger JavaScript-Code benötigt. Allerdings ist es lehrreich zusehen, wie dies auch selbst programmiert werden kann.

[Bearbeiten] 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 mousemove-Event. Den Moment der Ablage liefert Ihnen das mouseup-Event. Treten die Ereignisse Mausbewegung oder Loslassen der Maustaste ein, so wird von den entsprechenden Eventhandlern eine verarbeitende Funktion aufgerufen. Innerhalb dieser Funktion können Sie - falls erforderlich - auf die Eigenschaften des Event-Objekts zugreifen und den gewünschten Effekt erzeugen.


[Bearbeiten] Beispiel und Erläuterungen

Beispiel: Drag and Drop: ansehen …
var elem = document.getElementById('main');
elem.addEventListener('mousemove', drag);
elem.addEventListener('mouseup', dragstop);	
 
   //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 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";
  }
}


Der addEventListener initialisiert die Eventüberwachung und ordnet dem mouseup-Event die Funktion dragstop() und dem mousemove-Event 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 der 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ässt 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.


[Bearbeiten] Siehe auch

Folgende Seiten werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML