Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL
Help

12 Einige globale Attribute zum Schluss > 12.5 Drag&Drop mit dem »draggable«-At... - Pg. 313

Drag&Drop mit dem »draggable«-Attribut 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. HINWEIS 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> 313