Information Technology Reference
In-Depth Information
Der Wert des
dropEffect
-Attributs darf in jeder Phase der Drag&Drop-Aktion
geändert werden, muss dabei aber immer dem zuvor in
effectAllow
festgeleg-
ten Wert entsprechen. Zusätzlich zu
copy
,
link
,
move
und
none
sind bei
effect-
Allow
auch Kombinationen wie
copyLink
,
copyMove
oder
linkMove
erlaubt, die
dann jeweils beide Komponenten als gültig ausweisen. Über das Keyword
all
können auch alle Effekte zugelassen werden.
Abschließend noch ein paar kurze Gedanken zu Sicherheitsaspekten bei
Drag&Drop: Daten im
DataTransfer
-Objekt dürfen erst beim
drop
-Event wieder
dem Script zur Verfügung gestellt werden. Damit wird verhindert, dass beim Ziehen
von Dokument A zu B über ein
feindliches
Dokument C Daten abgefangen werden
können. Aus demselben Grund muss das
drop
-Event explizit vom Benutzer durch
Loslassen des Objekts und nicht etwa automatisch vom Script ausgelöst werden.
Auch das scriptgesteuerte Bewegen des Fensters unterhalb der Mausposition darf
kein
dragStart
-Event auslösen, da sonst gegen den Willen des Benutzers wiede-
rum sensitive Daten in feindliche Drittdokumente gezogen werden könnten.
Drag&Drop im Browser eröffnet ganz neue Möglichkeiten. Wenn Sie nach ei-
nem eindrucksvollen Beispiel für die Kombination von Drag&Drop mit
Canvas
,
localStorage
,
Offline-Speicher
und weiteren Techniken im HTML5-Umfeld wie
XMLHttpRequest
oder der
FileAPI
suchen, dürfen Sie Paul Rougets Blog-Post,
an HTML5 offline image editor and uploader application
, mit seinem vierminü-
tigen Video nicht versäumen. Auch wenn es nur als
Showcase
für Features in
Firefox 3.6 gedacht ist, zeigt es doch eindrucksvoll, was jetzt schon möglich ist:
http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-
application/
»
Mit einem Aspekt dieses Demos wollen wir uns noch etwas näher beschäfti-
gen, und dabei werden Sie sowohl Drag&Drop vom Desktop in ein Dokument
als auch das Extrahieren von Daten aus der gezogenen Datei mithilfe der
File-
API
kennenlernen.
12.5.1 Drag&Drop in Kombination mit der »FileAPI«
Abbildung 12.4 zeigt einen Screenshot jener Applikation, die wir in diesem Ab-
schnitt auf Basis von Drag&Drop und der
FileAPI
entwickeln werden. Sie er-
laubt uns, lokal abgespeicherte Bilder einer Digitalkamera oder eines mobilen
Endgeräts direkt in den Browser zu ziehen und dann Teile ihrer EXIF-Informa-
tionen sichtbar zu machen. Die dazu nötigten Files stehen wieder online zur
Verfügung:
