Tutorial: Drag-and-Drop mit Scriptaculous – Teil 1: Draggable
Heute möchte ich mein angekündigtes Tutorial über Drag-and-Drop starten. Das Ziel dieses Tutorials ist der Nachbau einer dynamischen Newsseite, wie ich sie in meinen Artikel Öffentlich-rechtlich und vorbildhaft – So muss eine Web 2.0 zu Olympia aussehen vorgestellt habe. Da eine solche Seite mit vielen verschiedenen Techniken zusammengesetzt ist, werden wir immer kleine Teile auf dem Schritt zur fertigen Seite nachvollziehen.
Im ersten Teil geht es um die Grundlage einer Seite mit Drag-and-Drop. Wir verwenden für dieses Tutorial die Drag-and-Drop Funktionalität von Scriptaculous, welches eine Erweiterung des Prototype Frameworks ist. Um die hier gezeigten Funktionen selbst nachprogrammieren zu können benötigt ihr also zuerst einmal die beiden Frameworks.
Der Quellcode für dieses Beispiel
Beginnen wir also mit dem Beispiel. Zuerst einmal benötigen wir etwas HTML in dem wir ein Element platzieren, welches wir dann aufnehmen möchten. Für das Element nehme ich exemplarisch ein DIV, aber ihr könnt auch z.B. ein Bild verwenden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
<head>
<head>
<title>Drag-and-Drop Teil 1</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<style type="text/css">
#draggable {
width: 100px;
height: 100px;
padding: 30px;
background-color: #39c;
border: 1px solid #000;
cursor: move;
}
</style>
</head>
<body>
<h1>Drag-and-Drop</h1>
<div id="draggable"></div>
<script type="text/javascript">
new Draggable('draggable');
</script>
</body>
</html>
Wichtig für das Aktivieren der Draggable Funktion auf ein Element ist eine ID für das Element. Das DIV hat hier die ID “draggable”. Im Kopf werden die beiden JavaScript Dateien für Prototype und Scriptaculous eingebunden. Wichtig ist hierbei, dass zuerst Prototype eingebunden wird. Zusätzlich ist noch etwas CSS angegeben um dem DIV einen Rahmen und eine Hintergrundfarbe zu verpassen. Alles was nun notwendig ist, um das DIV aufnehmbar zu machen ist eine einzige Zeile JavaScript:
new Draggable('draggable');
Es wird hier eine neue Instanz des Draggable Objekts erzeugt. Dem Konstruktor wird hierbei die ID des Elements übergeben, welches aufnehmbar sein soll.
Ein Beispiel gefällig
Da dieser Blog auch Prototype einsetzt, sollten wir es nicht bei einem Quellcode Auszug belassen, sondern einfach mal hier ein solches DIV einfügen. Also, hier kommt es:
Dieses DIV kann nun beliebig im Sichtbaren Bereich verschoben werden. Die Klasse bietet aber auch viele Optionen, die in einem Hash an die Funktion als zweiten Parameter übergeben werden können. Wir können z.B. die Bewegung eines Elements auf die horizontale beschränken und zusätzlich das Element beim “Loslassen” des Elements wieder auf seine ursprüngliche Position zurücksetzen. Der JavaScript Befehl dazu sieht wie folgt aus:
new Draggable('draggable2', {constraint: 'horizontal', revert: true});
Ich habe hier die ID um eine Zwei erweitert, damit ich auch dieses Beispiel hier vorführen kann. Wichtig ist natürlich immer, dass ihr für die verschiedenen Elemente unterschiedliche IDs verwendet und niemals eine ID in zwei Instanzen verwendet. Das DIV verhält sich dann wie folgt:
Da es hier in diesem Tutorial nicht darum geht alle möglichen Optionen zu erklären möchte ich euch gerne auf die API Referenz der Draggable Klasse verweisen. Dort findet ihr eine Liste aller Optionen und einige weitere Beispiele.
Damit möchte ich auch schon den ersten Teil des Tutorials abschließen. Ihr solltet einfach einmal die verschiedenen Optionen ausprobieren um zu sehen, wie sich das DIV dabei verhält. Im zweiten Teil beschäftigen wir uns mit “dem Bruder” von Draggable. Dabei handelt es sich um die Droppables Klasse, die es ermöglicht ein aufgenommenes Element “einzufangen” und auf das Element zu reagieren.
Zeilen-Duplizierer mit AutoComplete Felder nutzen
ich bekam heute in einem Kommentar die Frage gestellt, ob mein Zeilen-Duplizierer aus dem Beitrag: Einfacher Zeilen-Duplizierer mit Prototype auch auf Feldern funktioniert, die die Scriptaculous Ajax.AutoCompleter Funktion verwenden.
Ich nutze den Duplizierer selbst in einem Formular, das solche Felder enthält. Meine erste Fassung entsprach dabei dem Einzeiler aus dem vorherigen Beitrag. Das Problem dabei ist allerdings, dass die AutoCompleter Funktion beim Erzeugen mit dem Felder verknüpft wird, auf das sie angewendet werden soll. Wenn man nun dieses Feld kopiert wird nicht eine neue Instanz des Ajax.AutoCompleter erzeugt, sondern die Referenz auf das alte Feld mit kopiert. Ein Eintrag im neu erzeugten Feld aktiviert also die AutoCompleter Funktion des vorherigen Feldes.
Google Maps Suggest – Adress-Autovervollständigung mit Scriptaculous
Viele nutzen Autovervollständigungen auf ihrer Website. Es ist nicht nur eine sehr beeindruckende Technik, sondern zudem eine sehr nutzerfreundliche. Zusätzlich kann sie dazu dienen, dass in einem Formular möglichst gültige Werte gespeichert werden. Selbstverständlich müssen alle Daten serverseitig erneut überprüft werden.
Ich möchte heute zeigen, wie einfach es mit Scriptaculous möglich ist, eine Autovervollständigung mit Google-Maps-Adressen umzusetzen. Da man per AJAX nicht auf fremde Website einen AJAX-Request durchführen kann, müssen wir ein Skript als Schnittstelle zwischen Google Maps und unserer Website verwenden. Fangen wir also dieses Mal mit der serverseitigen Script an:
Die magische select() Funktion!
Bei meinem vorherigen Post zum Zeilen-Duplizierer stand ich vor dem Problem, dass ich Elemente eines bestimmten Tags innerhalb eines ausgewählten DOM-Elements finden musste. Da ich hierfür in den Utility Methods nicht gefunden habe, musste ich die Funktion getElementsByTagName() verwenden. Alleine hiermit konnte ich aber noch immer nicht auf die Elemente zugreifen. Dazu musste ich den Aufruf noch mit der $A() Funktion verwenden. Der gesamte Aufruf für die drei Formularfelder sah dann wie folgt aus:
Einfacher Zeilen-Duplizierer mit Prototype
Viele standen schon einmal vor dem Problem, dass in einem Formular zu einem Bereich mehrere Eingaben möglich sein sollten. Meist wird dies durch mehrere Text-Felder gelöst, die in einer Tabelle angeordnet sind. Um nun aber dem Benutzer die Möglichkeit zu geben eine weitere Zeile einzufügen musste oft das Formular “abgeschickt” werden, wobei aber der Speicher-Algorithmus umgangen wurde. Anschließend wurde das gesamte Formular neu geladen mit einer neuen Zeile für den entsprechenden Bereich.
Zum Glück sind wir heute wesentlich weiter. Zwar war eine Lösung per JavaScript auch in der Vergangenheit schon möglich, aber durch die Verwendung modernen Frameworks wie Prototype lässt sich das gesamte Problem auf eine Zeile Code reduzieren:
Kau-Boy’s AutoCompleter Plugin
Dieses Plugin verwendet den Ajax.Autocompleter von script.aculo.us bzw. die jQuery Autocomplete Funktoin um Beiträge zu finden, die den Suchbegriff im Titel oder Inhaltstext enthalten.
Der eingegebene Text kann in den Titel der Beiträge und/oder im Inhalt gesucht werden. Es kann zusätzlich die Formatierung der Ergebnisse über eine eigene CSS Datei an den Blog angepasst werden. Es kann jeweils der Titel oder zusätzlich ein Teil des Inhalts angegeben werden, wobei hier auch die Länge des auszugebenden Inhaltes eingestellt werden kann.
