Information Technology Reference
In-Depth Information
HINWEIS
Wie der Ausdruck
Minefield
in der Titelleiste von Abbildung 12.1 andeutet, wur-
de der Screenshot mit einem
Nightly build
von Firefox 4 erzeugt, denn nur ab
dieser Browser-Version sind die Voraussetzungen für das Spiel gegeben. Mit
Ausnahme von
data-*
, für das wir wie bereits erwähnt Remy Sharps JavaScript-
Shim
verwenden, sind alle nötigen Attribute und Methoden in Firefox 4 imple-
mentiert.
12.5 Drag&Drop mit dem »draggable«-Attribut
Drag&Drop im Browser ist eigentlich nichts Neues, denn bereits 1999 verfügte
der Internet Explorer, damals in Version 5.0, über diese Funktionalität. Auf Ba-
sis der IE-Implementierung wurde Drag&Drop dann Mitte 2005 in die Spezifi-
kation aufgenommen und ist heute mit Ausnahme von Opera in allen gängigen
Browsern verfügbar.
Die Checkliste für die Implementierung einer klassischen Drag&Drop-Opera-
tion, wie wir sie im Spiel zum Reihen der Städte nach Einwohnerzahl vorneh-
men werden, umfasst folgende Aufgaben:
Auswählen der Elemente, die gezogen werden dürfen
»
Bestimmen der Daten, die im Hintergrund mitgezogen werden sollen, so-
bald der Drag&Drop-Vorgang eingeleitet ist
»
Festlegen, an welchen Stellen das gezogene Element abgelegt werden darf
»
Extrahieren der Daten, sobald der Benutzer den Drag&Drop-Vorgang bei
einem gültigen Zielobjekt beendet
»
Zur Erfüllung der ersten Aufgabe steht das globale
draggable
-Attribut zur Ver-
fügung. Es weist über
draggable=true
das jeweilige Element als Kandidat für
das Ziehen an eine andere Position aus. Zwei HTML-Elemente sind von Haus
aus schon als
draggable
definiert: das
img
-Element und das
a
-Element, sofern
es ein
href
-Attribut besitzt. Damit war es auch bisher schon möglich, Links
oder Bilder auf den Desktop zu ziehen und damit bequem zu speichern. Wollen
wir Drag&Drop bei diesen Elementen verhindern, können wir
draggable=false
verwenden.
Um einen Eintrag der Städteliste des Spiels für Drag&Drop vorzubereiten,
müssen wir zuerst das
draggable
-Attribut hinzufügen und auf
true
stellen.
<li id=be draggable=true>Brüssel</li>
