Kau-Boys blog » Scriptaculous

Tutorial: Drag-and-Drop mit Scriptaculous – Teil 2: Droppables

Bernhard — Mon, 15 Mar 2010 15:29:16 +0000

Nachdem wir uns in Teil 1 des Tutorials mit der Draggable Klasse beschäftigt haben, wenden wir uns heute seinem Bruder der Droppables Klasse zu. Mit ihr können wir auf ein aufgenommenes Element reagieren. Eine typische Anwendung sind Einkaufkörbe auf Online-Shops. Ich möchte daher einen einfachen Einkaufswagen demonstieren.

Der Quellcode für dieses Beispiel

Zuerst einmal wieder der Quellcode für dieses Beispiel. Ich werde wie auch schon im ersten Teil des Tutorials die wichtigen Zeilen etwas genauer erklären. Die Zeilen 1-34 enthalten das grundlegende Gerüst der HTML-Seite sowie die Stylesheets, auf die ich nicht näher eingehen möchte:




	
		Drag-and-Drop Part 2
		
		
		
	
	
		Drag-and-Drop

In den Zeilen 35-39 sind zwei einfache “Artikel” aufgeführt (in unserem Fall einfache farbige DIVs) sowie der “Warenkorb”, der eine leere unsortierte Liste enthält. In diese fügen wir dann per Drag-and-Drop die Waren ein. Sehen wir uns nun aber den interessanten Teil des Quellcodes an, das JavaScript. Die Zeilen 41-46 sollten aus dem ersten Teil des Tutorials bekannt sein. Wir erzeugen hier zwei Draggables wobei wir die Option reset auf true setzen, damit die Artikel beim “loslassen” wieder auf ihre ursrpüngliche Position zurückkehren. Nun aber zum neuen Teil der Droppables-Klasse:

Droppables.add('shopping_cart', {
	onDrop: addItem,
	hoverclass: 'hover'
});

Wichtig ist hier, dass wir keine Instanz der Klasse durch das Schlüsselwort new erzeugen. Es existiert vielmehr schon eine Instanz, der wir mit der add() Funktion eine neue “Drop-Zone” hinzufügen. Es ist also möglich mehrere Bereiche einer Website für die Reaktion auf Draggables zu verwenden. Es wäre z.B. möglich einen “Papierkorb” einzurichten, mit dem man einenen bereits hinzugefügten Artikel wieder aus der Liste entfernen kann bzw. dessen Anzahl verringern.

Der add() Funktion können auch mehrere Optionen übergeben werden, welche das sind könnt ihr in der API zu Droppables nachlesen. Ich verwende hier die hoverClass Option, die der “Drop-Zone” eine Klasse zu weist, wenn der Benutzer mit einem Draggable darüber steht. Zusätzliche gebe ich eine Callback-Funktion für das onDrop Event an. Wie ihr der Funktion addItem() entnehmen könnte, bekommt die onDrop() Funktion eine Referenz auf das aufgenommene Elemente sowie auf die “Drop-Zone” und das Event selbst übergeben. In der Funktion selbst fügen wir den Artikel an die Liste an und setzen die Anzahl auf 1, sofern er noch nicht enthalten ist. Wenn er enthalten ist erhöhen wir dir Anzahl um 1.

Das Beispiel

Das oben beschriebene Beispiel sieht dann wie folgt aus (es darf aber gerne unter Verwendung von Bildern anstelle von DIVs und mehr CSS noch ansprechender gestaltet werden):

Warenkorb

Wie ihr also sehen könnt ist es sehr einfach ein Element für die Interaktion mit Draggables zu verwenden. Was ihr dabei mit den Elementen macht ist eurer Fantasie überlassen. Die Möglichkeiten sind schier unbegrenzt. Ich möchte euch also dazu animieren einfach einmal mit der Funktion zu experimentieren.

Das war es dann auch schon wieder mit diesem Teil des Tutorials. Im nächsten Teil sehen wir uns einen sehr speziellen Fall von Drag-and-Drop an und zwar mit dem Sortieren von Elementen. Wie einfach so etwas möglich ist und wie leicht sich die Sortierreihenfolge auslesen lässt, das erwartet euch in Teil 3 des Tutorials. Für welche Einsatzzwecke habt ihr bisher Draggables und Droppables genutzt? Über einen Kommentar dazu würde ich mich wie immer sehr freuen.

Tutorial: Drag-and-Drop mit Scriptaculous – Teil 1: Draggable

Bernhard — Tue, 02 Mar 2010 16:38:32 +0000

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

Bernhard — Wed, 17 Feb 2010 13:18:55 +0000

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.

Um dieses Problem zu lösen hatte ich die erweiterte Funktion mit den beiden Callback-Funktionen erstellt. Damit ist es möglich die Referenz zum vorherigen Feld zu lösen und eine neue Instanz des Ajax.AutoCompleter nach dem Erzeugen der Kopie zu erstellen. Hier aber zuerst noch einmal die Funktion selbst. Ich habe mittlerweile auch eine Option zum Fokussieren des ersten Feldes in der Kopie hinzugefügt:

function addRow(selector, options){
	var lastRow = $$(selector).last();
	var newRow = lastRow.cloneNode(true);
	if (options.reset) {
		newRow.select('select', 'textarea', 'input').each(function(elm){
			elm.clear().checked = '';
		});
	}
	if(options.beforeInsert) options.beforeInsert(newRow);
	lastRow.insert({'after': newRow});
	if(options.afterInsert) options.afterInsert(newRow);

	if (options.focusFirst) {
		newRow.select('input', 'select', 'textarea').first().focus();
	}
}

Um die Ajax.Autocompleter Funktion nutzen zu können benötigt jedes Feld eine eindeutige ID. Nehmen wir also an, wir haben folgendes erstes Feld für unser Formular (hier ein Beispiel aus dem Artikel: Google Maps Suggest – Adress-Autovervollständigung mit Scriptaculous):


	
		Choose an address
		
			Address:

Wichtig sind hierbei natürlich die eckigen Klammern am Ende des Name Attributs, damit auch alle kopierten Werte mitübertragen werden. Damit wir einer Kopie dieses Feldes eine neue Instanz hinzufügen können, müssen wir beim Kopieren auch die ID verändern. Dazu schreiben wir uns eine kleine Callback-Funktion, die genau das erledigt:

function activateAutocomplete(newRow){
	var addressInput = $A(newRow.select('input')).first();
	addressInput.id += 1;
	addressInput.stopObserving();
	new Ajax.Autocompleter(addressInput.id, 'adresse_choices', 'get_addresses.php');
}

In der 2. Zeile selektieren wir das erste Element innerhalb der neuen Zeile (wir nehmen hier also an, dass es sich dabei um das AutoCompleter Feld handelt). Diesem fügen wir in der 3. Zeile zusätzlich zur ID eine 1 hinzu. Es entstehen also Felder nach dem Muster "address1", "address11" usw. Das reicht aus um die Felder genau zu referenzieren.
In der 4. Zeile kommt die schon angesprochene Funktion zum Einsatz, die das Autocomplete für das Feld deaktiviert. Zu guter Letzt erzeugen wir eine neue Instanz des Ajax.Autocompleter. Wir können dabei als zweiten Parameter dasselbe DIV Element für die Vorschläge verwenden, da es ja nicht möglich ist, gleichzeitig in zwei Felder etwas einzutippen. Das DIV wird automatisch durch Scriptaculous unter das Feld positioniert, in dem es verwendet wird.

Damit das ganze nun auch dupliziert werden kann, fügen wir noch einen entsprechenden Link ein. Dieser muss dann die Callback-Funktion als zweiten Parameter in der Funktion erhalten. Ich verwende hier ein SPAN Element mit einem onclick Event. Es geht aber auch mit einem gewöhnlichen Link:

Adresse hinzufügen

Es wird durch den Selektor "#addressform dl" die gesamte Definition inklusive des Label kopiert. Ihr könnt aber auch eine andere HTML Struktur wie z.B. eine unsortierte Liste verwenden.

Das war auch schon alles. Das Beispiel könnt ihr euch hier ansehen und auch den Quellcode dazu runterladen:

Beispiel Download

Ich hoffe, dass euch die erweiterte Anwendung gefallen hat und vielleicht auf neue Ideen gebracht hat. Wenn ihr eine andere Anwendung kennt, bei der Ihr nicht weiterkommt würde ich mich wie immer über einen Kommentar sehr freuen.

Google Maps Suggest – Adress-Autovervollständigung mit Scriptaculous

Bernhard — Tue, 06 Oct 2009 22:22:36 +0000

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:

$json = json_decode(file_get_contents('http://maps.google.com/maps/geo?output=json&oe=utf8&sensor=false&hl=de&key=DEIN_GOOGLE_MAPS_API_KEY&q='.urlencode($_REQUEST['address'])));

echo '';
if(!empty($json->Placemark)){
	foreach($json->Placemark as $value){
		echo ''.$value->address.'';
	}
}
echo '';

Zuerst stellen wir eine Suchanfrage an Google Maps, wobei wir den zu suchenden Text einfach im Parameter “q” übergeben. Der Parameter “output” gibt hierbei das von Google Maps zurückgelieferte Format an. Ich habe hier JSON verwendet und wandle die Daten anschließend mit der json_decode() Funktion in ein Objekt um. Es kann aber genauso gut XML in Kombination mit einer XML Funktion sie simplexml_load_string() verwendet werden. Da JSON da kompaktere Format ist habe ich mich in diesem Beispiel dafür entschieden.

Ein weiterer interessanter Parameter ist “hl”, der die Sprache der Adressen angibt. Viele werden den Parameter auch von der Google Suche kenne. Hier werden die Adressen also in deutsch zurückgegeben. Mit Hilfe dieses einen Parameters könnt ihr also sehr schnell die Funktion auf andere Spracheversionen eurer Seite anpassen.

Damit ihr überhaupt eine Anfrage an Google Maps stellen dürft, benötigt ihr einen kostenlosen Google Maps API Key, den ihr an den “key” Parameter anhängen müsst (Danke an paddy, der mich auf das Fehlen des Keys hingewiesen hat).

Nachdem die Daten von Google Maps empfangen wurden und im Objekt vorhanden sind, geben wir sie an die JavaScript Funktion zurück. Dazu erzeugen wir einfach eine unsortierte Liste mit einem Eintrag pro gefundener Adresse.

Und jetzt kommen wir zum sehr umfangreichen clientseitigen Script. Dazu müssen wir erst einmal ein Formular mit einem Textfeld erzeugen. Außerdem benötigen wir ein DIV, in dem die Ergebnisse ausgegeben werden. Zu guter Letzt kommt dann noch das JavaScript, das den ganzen AJAX-Request und das Behandeln der Empfangenen Daten erledingen muss. Was aber sehr kompliziert klingt, ist recht kurz umgesetzt:

Die ganze Sache lässt sich mit einer einzigen Zeile JavaScript erledigen. Selbstverständlich müssen dazu noch im Kopfbereich die “prototype.js” sowie anschließend die “scriptaculous.js” eingebunden werden. Die Funktion Ajax.Autocompleter() gehört hierbei zum Funktionsumfang von Scriptaculous. Das fertige Resultat sieht dann wie folgt aus:

Die hier verwendete ABC-Straße ist kein Witz, sondern die Adresse von Google Deutschland. Eine weitere schöne Eigenschaft von Google Maps ist die automatische Rechtschreibkorrektur, die bei fehlehaften Eingaben durchgeführt wird. Selbst eine Eingabe wie “plazt der luftblöcke” führt trotzdem zu dem gewünschten Platz vor dem ehemaligen Berliner Flughafen. Um die Sache testen zu können, habe ich hier ein kleines Beipsiel erstellt, dass ihr euch auch gerne im Quellcode runterladen könnt. Ich habe zusätzlich noch eine Funktion verwendet, die den Suchbegriff hervorhebt:

Beispiel Download

Wir ihr also sehen könnt, ist es mit der Ajax.Autocompleter() Funktion und einem servreseitigen Skript sehr einfach möglich, auch Daten von anderen Seiten auszuliefern. Das dazu benötigte PHP Skript kann durch kleine Veränderungen an die entsprechende extrene Datenquelle und das zurückgelieferte Format angepasst werden. Die Funktion lässt sich aber natürlich auch genauso gut mit jQuery oder einem anderen Framework umsetzen. Dazu muss dann aber eventuell das zurückgelieferte Format des PHP Skript auch noch angepasst werden.

Ich hoffe das Beispiel hat euch gezeigt, wie vielfältig sich eine Autovervollständigung einsetzen lässt. Habt ihr auch schon einmal mit externen Daten gearbeitet? Oder habt ihr vielleicht eine Idee, konntet sie aber bisher nicht umsetzen? Über ein Kommentar dazu würde ich mich sehr freuen.