Tutorial: Drag-and-Drop mit Scriptaculous – Teil 2: Droppables
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:
<!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 Part 2</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<style type="text/css">
.item {
padding: 40px;
border: 1px solid #000;
cursor: move;
display: inline-block;
margin-right: 20px;
}
.blue {
background-color: #39c;
}
.green {
background-color: #292;
}
div#shopping_cart {
width: 180px;
height: 180px;
background: #fff;
border: 5px solid #ccc;
}
div#shopping_cart.hover {
border: 5px dashed #aaa;
}
</style>
</head>
<body>
<h1>Drag-and-Drop</h1>
<div id="blue_box" title="Blaue Box" class="item blue"></div>
<div id="green_box" title="Grüne Box" class="item green"></div>
<div id="shopping_cart">
<ul id="items_in_cart"></ul>
</div>
<script type="text/javascript">
new Draggable('blue_box', {
revert: true
});
new Draggable('green_box', {
revert: true
});
Droppables.add('shopping_cart', {
onDrop: addItem,
hoverclass: 'hover'
});
function addItem(dragged, dropped, event){
var itemCount = $('items_in_cart').select('li[id="item' +
dragged.id + '"] span').first();
if(itemCount == undefined){
$('items_in_cart').insert({
bottom: '<li id="item' + dragged.id +
'"><span>1</span>x ' + dragged.title + '</li>'
});
} else {
itemCount.update(parseInt(itemCount.innerHTML) + 1);
}
}
</script>
</body>
</html>
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):
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
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.
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.
