JavaScript-Beispiele: DHTML mit Drag & Drop

Mit DHTML lassen sich feine Dinge anstellen. Ob Aufklapplisten, Blitze oder Drag and Drop - der Fantasie sind keine Grenzen gesetzt.

Drag and Drop

Eine der vielen Anwendungsmöglichkeiten für DHTML sind sogenannte Drag & Drop Funktionen. Drag & Drop bedeutet, der Benutzer kann ein Element mit der Maus anfassen, es beliebig durch die Gegen ziehen und dann wieder fallen lassen.

Wie bei allen DHTML-Dingen benötigen wir auch hierfür eine Browserunterscheidung. Das Prinzip des Drag & Drop ist dann folgendes: Greift der Besucher nach einem Layer (onmousedown-Ereignis), verankern wir es mit der Maus. Verankern bedeutet, sobald sich die Maus bewegt (onmousemove-Ereignis), muss sich auch der Layer bewegen. Derartiges haben wir im Grunde schon in einem vorhergehenden Abschnitt mit Bildern gemacht - nur eben so, dass das Bild immer der Maus folgt. Läßt der Benutzer die Maustaste dann wieder los (onmouseup-Ereignis), wird auch die Verankerung gelöst.

Schritt 1: Einen Layer greifen

Wir wollen uns erst mal die fertige Funktion zum Aufnehmen ansehen (Browserabfrage vorausgesetzt):

Um mehrere Layer auf einer Seite verwenden zu können, versuchen wir alles so allgemein wie möglich zu halten. Wir definieren zuerst 4 Variablen. hatgenommen ist ein Boolean mit dem wir klären können, ob der Layer gerade angefaßt wird (true) oder nicht (false). Die Variablen posx und posy brauchen wir um die Verschiebung des Layers angenehmer zu gestalten: Sie beinhalten den horizontalen bzw. vertikalen Abstand der Maus zur linken oberen Ecke. Die Variable ziel stellt den Layer dar, der gerade angefaßt wurde - wir brauchen sie um nicht für jeden Layer eine Funktion schreiben zu müssen oder ständig ID's zu übergeben. Innerhalb der Funktion wird als erstes geprüft, ob der Layer schon gegriffen ist, damit eventuellen Fehler vorgebeugt wird. Da die Browser verschiedene Modelle des Ereignis-Objekts besitzen verallgemeinern wir bis zur Zeile "ziel = t;" die x- und y-Koordinate des Ereignisses sowie das Ziel. Anschließend werden die Abstände berechnet, die zwischen Mauscursor und Layerecke liegen (eben die Variablen posx und posy).

Schritt 2: Den Layer bewegen

Anschließen muss der Layer natürlich bewegt werden. Um alles allgemein zu halten, haben wir den Layer zuvor in der Variablen ziel gespeichert. Die Funktion zum Bewegen könnte dann so aussehen:

Auch hier verallgemeinern wir als erstes die Koordinaten des Ereignisses und ziehen dann den Abstand der Maus zur oberen linken Ecke ab. Letztlich brauchen wir das Ziel nur neu zu positionieren.

Schritt 3: Den Layer wieder los lassen

Um den Layer wieder los zu lassen braucht es nicht viel:

function LassLos(){ hatgenommen = false; }

Ist die Variable hatgenommen gleich false wird automatisch die Funktion Bewege abgebrochen - der zuvor bewegte Layer also nicht weiter bewegt.

Schritt 4: Alles Zusammenfügen

Um alles komplett zu machen müssen nun nur noch alle Layer mit Event-Handlern verknüpft werden. Auch hierfür schaffen wir uns eine allgemeine Funktion um bei vielen Layern Übersicht und Platz zu sparen. Die Funktion könnte z.B. so aussehen:

Beim Laden der Seite braucht nun lediglich noch die Verknüpfung mit den Layern hergestellt werden. Der gekürzte HTML-Code dazu könnte letztlich dann z.B. so aussehen:

<html>
<head>
<title>Drag & Drop</title>
<script type="text/javascript">

</script>
</head>
<body onload="Verknuepfe('Layer1'); Verknuepfe('Layer2')">

<div id="Layer1" style="position:absolute; left:10px; top:10px;
width:100px; height:100px;"> Verschiebe mich!</div>

<div id="Layer2" style="position:absolute; left:200px; op:200px;
width:100px; height:100px;">Verschiebe mich!</div>

</body>
</html>

Ausklapplisten mit dem DOM

Das folgende Beispiel beschreibt Aufklapplisten nach dem DOM, d.h. nicht bzw. nur teilweise DOM-fähige Browser wie der Netscape 4.x oder Opera 4.x können damit leider nur wenig anfangen.

Vorbereitung: Die Symbole anfertigen

Das Prinzip ist kurz erklärt: Klickt der User auf einen Listenknoten (ul-Element) der Unterknoten besitzt klappen dies Unterknoten auf bzw. zu. Letztlich ergibt sich eine Art Baumnavigation wie man sie z.B. vom Windows-Explorer kennt:

Darstellung: Das Listen-Menü des Windows-Explorers

Entsprechend brauchen wir also als erstes einige Bildchen. Ein Screenshot des Explorers und ein bißchen Grafikbearbeitung schon haben wir die gewünschten Grafiken erstellt:

Darstellung: Die ausgeschnittenen Listenbilder

Bevor wir mit JavaScript ans Werk gehen können, sollten wir das HTML-Grundgerüst erstellen. Wir benötigen eine Liste mit mehreren Unterlisten. Jedem Listeneintrag wird außerdem eine CSS-Klasse (class-Attribut) zugewiesen. Innerhalb der CSS-Definitionen können wir dann die normalen Listensymbole (Punkt, Kreis, Quadrat, ...) gegen unsere Bilder eintauschen. Die list-style-image-Eigenschaft übernimmt diese Aufgabe für uns:

<html>
<head>
<title>Ausklappliste</title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body>
<ul class="liste3">
<li class="liste1">  Home</li>
<li id="a1" class="liste2">  Angebote
  <ul id="a2" class="liste2">
   <li class="liste1">  Aktuelle Angebote</li>
   <li id="aa1" class="liste2">  Pflanzen
    <ul id="aa2" class="liste2">
     <li class="liste1">  Blumen</li>
     <li class="liste1">  Bäume</li>
    </ul>
   </li>
   <li class="liste1">  Gartenbedarf</li>
  </ul>
</li>
<li class="liste1">  Kontakt</li>
<li class="liste1">  Suche</li>
</ul>
</body>
</html>

Wie Sie am obigen Beispiel sehen können wurden schon ganz bestimmte Einträge mit ID's und anderen Klassen versehen. Das Schema sollte recht leicht nachvollziehbar sein: Alle normalen Einträge bekommen die Klasse liste1, alle Einträge die als Haupteintrag für Untereinträge sein sollen bekommen die Klasse liste2 und der Haupteintrag der gesamten Liste bekommt die Klasse liste3. Außerdem bekommen alle Übereinträge (also die, die Unterknoten enthalten) eine ID die sich auch im nächsten ul-Element widerspiegelt: Heißt der Übereintrag z.B. a1, so heißt das untergeordnete ul-Element a2; heißt er b1, so heißt das ul-Element b2 usw. Diese Einteilung wurde natürlich nicht ohne Grund so vorgenommen. Klickt der User auf einen Haupteintrag, können wir leicht über dessen ID die ID des Untereintrags heraus finden indem die letzte Zahl weggestrichen und dafür eine 2 angehängt wird.

Die Zweige mit JavaScript verbinden

Als erstes müssen alle Haupteinträge mit einem Ereignis verknüpft werden. Eine kleine Funktion hilft uns unnötige Schreibarbeit bei vielen Knoten zu sparen (die Browserabfrage muss natürlich mit rein - die sparen wir uns jetzt aber mal):

Im obigen HTML-Beispiel haben wir ja zwei Hauptknoten definiert. Damit beide mit der Funktion Click verknüpft werden, fügen wir deshalb dem body-Tag einen kleinen Eintrag hinzu:

Die Zweige auf und zu klappen

Nun fehlt also nur noch die Funktion Click mit der wir die Unterknoten auf und zu klappen. Wir wollen Sie uns erstmal fertig anschauen:

Als erstes steht dort die Variable list, sie gibt uns auskunft darüber welche Knoten schon eingeklappt sind und welche nicht. Innerhalb der Funktion wird als erstes das Ziel-Objekt herausgefiltert und in t gespeichert. Nun müssen wir die ID des Elements herausfinden auf das geklickt wurde und welche ID entsprechend seine Unterknoten besitzen (Sie erinnern sich: Die Sache mit der 1 und 2 am Ende). Gleichzeitig prüfen wir, ob die ID schon in list enthalten ist (und entfernen sie) oder ob sie noch nicht enthalten ist (dann fügen wir sie hinzu). Damit haben wir auch geprüft ob die Liste auf oder zu zu klappen ist - die Variable verstecken speichert dazu den entsprechenden Wert true oder false. Nun kann es an die eigentliche Funktion gehen: Auf- und Zuklappen. Zuerst eine Verallgemeinerung um Platz zu sparen und dann wird je nach Wert von verstecken die Liste ein- bzw. ausgeblendet indem die CSS-Eigenschaft visibility auf hidden (versteckt) bzw. visible (sichtbar) gesetzt wird. Außerdem muss auch die Eigenschaft display mit einem neuen Wert versehen werden, da das Design sonst nicht zusammen rutschen würde und sich da wo zuvor die Einträge waren leere Flächen bilden würden. Letztlich setzen wir die CSS list-style-image-Eigenschaft neu um auch das Listensymbol entsprechen zu verändern (Pluszeichen für aufklappbare Liste und Minuszeichen für eine offene Liste).
Am Schluß müssen wir noch das Event-Bubbling verhindern, da sonst Fehler auftreten könnten. Das fertige Resultat sieht dann schon recht nett aus ...

Blitze auf der Seite

Das nun folgende Beispiel vereint die Techniken der zwei vorangegangenen Beispiele in einem: Positionieren von Layern und deren Sichtbarkeit bestimmen. Wir hier nämlich versuchen Blitze auf unsere Homepage zu zaubern. Die vier dafür notwendigen Grafiken haben wir recht schnell mit einem guten Grafikprogramm erstellt:

Darstellung: Die 4 Blitze als Grafiken

Das HTML-Grundgerüst

Jeder dieser vier Grafiken binden wir als Layer in das Dokument ein. Da die Blitze am besten bei Nacht wirken, entscheiden wir uns hier für einen schwarzen Seitenhintergrund. Das HTML-Gerüst:

<html>
<head>
<title>Blitze auf der Seite</title>
<script language="JavaScript">

</script>
<style type="text/css">

</style>
</head>
<body text="white" bgcolor="black" onload="StartBlitze()" >

<div id="blitz1" class="blitz">
<img border="0" src="blitz1.gif" >
</div>
<div id="blitz2" class="blitz">
<img border="0" src="blitz2.gif" >
</div>
<div id="blitz3" class="blitz">
<img border="0" src="blitz3.gif" >
</div>
<div id="blitz4" class="blitz">
<img border="0" src="blitz4.gif" >
</div>

<h1>Blitze</h1>

... Seiteninhalt ...
</body>
</html>

Die Blitze erzeugen - Zufallsreihenfolgen festlegen

Als nächstes machen wir uns an das eigentliche Skript und vor allem an die Funktion, die die Blitze positionieren und anzeigen soll. Um die Blitze nicht einfach irgendwo zu positionieren sondern im Hauptteil der Seite, wird der ungefähre Anzeigebereich berechnet. Die Eigenschaften screen.availHeight und screen.availWidth geben uns darüber Aufschluß, wie breit das Browserfenster maximal sein dürfte. Daraus lassen wir eine zufällige Position ermitteln - wie zuvor auch schon benutzt, hilft hier die Methode Math.random weiter. Außerdem wählen wir ebenso zufällig einen der vier Layer aus. Der Rest ist einfach und sollte soweit bekannt sein: Der ausgewählte Layer wird auf die errechnete Position gesetzt und angezeigt. Hier der Code dazu:

Wie Sie eventuell schon bemerkt haben, wurden die ID's der Layer im Array blitzIDs gespeichert - JavaScript kann so leichter einen zufälligen Layer auswählen.

Die Blitze entfernen

Nun fehlt eigentlich nicht mehr viel. Die obige Funktion DoBlitz ruft nun ja zum Entfernen der Blitze die Funktion ClearBlitze auf. Sie braucht eigentlich nicht viel zu machen als alle Layer durch zu gehen und diese verschwinden zu lassen. Sind alle Blitze wieder unsichtbar wird einfach mit einem zufälligen Timeout ein neuer Blitz gestartet:

Um die Blitzerei nun zu starten und eventuell wieder stoppen zu können bedarf es lediglich zweier kleiner Funktionen - und schon ist das Skript komplett fertig:

function StartBlitze(){ blitze_timer = true; DoBlitz(); }
function StopBlitze(){ blitze_timer = false; }

Um die Blitze automatisch zu starten haben wir im oben vorgestellten HTML-Grundgerüst schon ein onload-Ereignis in den body eingebunden. Wenn Sie wollen können Sie die Blitze noch mit Sounds hinterlegen - wie das geht wurde in einem vorhergehenden Beispiel ja schon beschrieben.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

JavaScript-Beispiele: DHTML mit Drag & Drop

Über uns

Cookie-Einstellungen