Während der letzte
Artikel in der dojo-Serie
sich mit den dijit.Dialog beschäftigte, komme wir nun zu einem meiner Lieblingsthemen
bei dojo: Drag & Drop. Es ist deswegen mein Lieblingsthema, weil es
so unglaublich einfach zu benutzen ist. Wie wir gleich sehen werden, benötigen
wir nur drei Zeilen JavaScript-Code, um unsere Session-Beschreibungen per
Drag & Drop umsortieren zu können.
Für Drag & Drop gibt es bei dojo zwei
Konzepte. Das eine Konzept bezieht sich auf das Verschieben von Elementen
an eine beliebige Position auf der Webseite. Das andere Konzept ist für
das Umsortieren von Elementen innerhalb eines Containers gedacht.
Für das Verschieben von Elementen wird
lediglich das zugehörige Package benötigt und die Kennzeichnung des zu
verschiebenden Elementes durch Angabe des dojo-Types.//Package
for moving elements
dojo.require("dojo.dnd.movable");
1.
<div dojoType="dojo.dnd.Moveable"> Some Content</div>
Es kann ein Kindelement als "Handle"
definiert werden, so dass dieses Element zum "Anfassen" benutzt
werden kann. Das ist dann besonders wichtig, wenn der Inhalt selber editierbar
ist. Ohne "Handle" könnte der Text nicht selektiert werden. 1. <div dojoType="dojo.dnd.Moveable"
handle="dragHandle">
2. <div id="dragHandle"></div>
<textarea>Dieser
Text kann editiert werden
3.
</textarea>
</div>
Das Umsortieren von Elementen innerhalb
eines Containers ist ebenfalls sehr praktisch und kann vielfältig eingesetzt
werden. Als Container kann jedes HTML-Element dienen, das Kindelemente
beinhaltet. Es ist also nicht nur auf ordered / unorderer lists beschränkt.
Neben dem obligatorischen Nachladen
des Packages muss nun lediglich das Eltern-HTML-Element als Container und
die Kindelemente als Drag&Drop Item gekennzeichnet werden. Es gibt
die abstrakte Klasse dojo.dnd.Container und die zwei Implementierungen
dojo.dnd.Source und dojo.dnd.Target. Wie die Namen vermuten lassen, dient
die Source als Quelle und Target als Ziel. //Package
for sorting elements via Drag & Dropt
dojo.require("dojo.dnd.Source");
1.
<div dojoType="dojo.dnd.Source">
2. <div
class="dojoDndItem">Item
X</div>
3. <div
class="dojoDndItem">Item
Y</div>
4. <div
class="dojoDndItem">Item
Z</div>
5. </div>
Neben der Angabe des dojoType
dojo.dnd.Source ist die Angabe der CSS Klasse "dojoDNDItem" der
Schlüssel zum Erfolg. Der Name der CSS Klasse ist entscheidend.
![\"A](\"http://www.assono.de/blog/Images/47DF551BD5D4367EC12578060038FBF3/EntryMoreRichMime/M2?OpenElement\")
In unserer Beispiel-Anwendung werden
wir nun die Session-Beschreibungen als Drag & Drop Items kennzeichnen
und das umschließende DIV mit der ID "Sessions" als Source definieren.
//Preparing
Drag & Drop
dojo.require("dojo.dnd.Source");
dojo.query(".session").addClass("dojoDndItem");
var dndSource =
new
dojo.dnd.Source("sessions");
Wie versprochen nur drei Zeilen
JavaScript-Code.
Es lohnt sich, das Beispiel
selber ausprobieren. Halten Sie beim Verschieben auch einmal die <STRG>-Taste
gedrückt.
In der zu dieser Artikelserien gehörenden
Beispieldatenbank
finden sie den Inhalt dieses Artikels in der Maske "webSpeedAgendaing-Step
8|SpeedAgendaing-8" und der JavaScript Bibliothek "SpeedAgendaing-Step8.js".
Im nächsten Artikel definieren wir ein
passendes Ziel für unsere Sessions.
![\"dojo-Logo\"/](\"http://www.assono.de/blog/Images/2A069C5CC09A6B90C12578060038FBD6/EntryRichMime/M2?OpenElement\")