Upload von Dateien
Die Standardform des Mauszeigers des jeweiligen Browsers lässt sich im Übrigen mittels ...
Die Standardform des Mauszeigers des jeweiligen Browsers lässt sich im Übrigen mittels
e.dataTransfer.setDragImage(img
element, x, y)durch ein eingefügtes Bild ersetzen. Der Effekt unterstützt die Aktionen none, copy, link und move.
Fortgeschrittenes Drag-und-Drop
Die Unterstützung für Drag-und-Drop in und aus dem Browser heraus - zum Beispiel zwischen zwei Fenstern verschiedener Browser oder zwischen einer Webseite und dem lokalen Desktop - ist derzeit noch deutlich schwieriger zu implementieren. Ein klassisches Beispiel für eine gelungene Umsetzung dieser Funktionalität stellt Gmail mit Drag-und-Drop von E-Mail-Anhängen dar. Als einer der Ersten hat die Drag-und-Drop-Fähigkeiten von Gmail ein Entwickler namens Ryan Seddon repliziert. Er stellte fest, dass es Google gelang, die benötigte Funktionalität in Chrome trotz der fehlenden Unterstützung für die File-API zu implementieren.
Upload von Dateien
Die fehlende Unterstützung für die File-API lässt sich mit Hilfe eines Formulareingabefeldes imitieren, das sich innerhalb der Drop-Zone befindet und für den Besucher unsichtbar ist:
<input type="file" multiple="true"
id="filesUpload" />Das drop-Ereignis erhält ausnahmsweise keinen Ereignislistener. Stattdessen wird ein Ereignislistener vom Typ change an die Eingabe angehängt.Die Lösung funktioniert leider nur in Chrome. Internet Explorer 9 bietet weder die Unterstützung für die File-API, noch kommt er mit der Behelfslösung zurecht. Die Behelfslösung mit dem Eingabefeld funktioniert hier gar nicht - zum Teil, weil diesem Browser wie auch Opera die Fähigkeit fehlt, die Eingabe aus dem Feld in einem Array zu erfassen. Firefox 4 unterstützt zwar bereits die File-API, weigert sich jedoch beim Upload von Bilddateien und stellt sie lieber dar. Safari kann auf Grund eines Bugs bei mehreren Dateien immer nur die erste hochladen.
Downloads
Den Ausgangspunkt für drag-und-drop-fähige Downloads einer PDF- und einer Schriftdatei in Chrome 5+ bietet etwa dieses Markup:
<a href="Vorschau.pdf" id="dragout"
class="dragme" draggable="true" data-downloadurl="application/pdf
:Vorschau.pdf
:https://magnus.de/Test/Vorschau.pdf">PDF-Datei</a>Anhand der Element-ID und des data-Attributs erfolgt nun die Erkennung drag-fähiger Dateien:
var files = [document.getElement
ById("dragout"),document.getElementById("dragout2")],
fileDetails = [];
if(typeof files[0].dataset ===
"undefined") {
// konventioneller Ansatz
fileDetails[0] = files[0].getAttribute
("data-downloadurl");
fileDetails[1] = files[1].getAttribute
("data-downloadurl");
} else {
fileDetails[0] = files[0].dataset.
downloadurl;
fileDetails[1] = files[1].dataset.
downloadurl;
}Sollte das betreffende Element das dataset-Attribut nicht unterstützen (undefined), sorgt die if-Schleife dafür, dass der benötigte Wert mit Hilfe von getAttribute erfasst wird. Zu guter Letzt wird nun ein ondragstart-Ereignislistener an das betreffende Objekt angehängt.
Fazit
Drag-und-Drop ist die nächste Iteration einer intuitiven Benutzerführung im Internet. Trotz der hohen Benutzerfreundlichkeit, die sich mittels Drag-und-Drop erzielen lässt, ist Drag-und-Drop außerhalb von Webseiten noch nicht wirklich bühnenreif.Da HTML5 in der Praxis schneller als erwartet zum allgemeinen Standard avancierte, ist die Implementierung von Drag-und-Drop auf Basis von HTML5 in modernen Browsern - wenn auch mit zahlreichen Einschränkungen - bereits heute durchaus möglich.
Fallback mit Modernizr
Drag-und-Drop im Rahmen des DOMs einer einzelnen Webseite funktioniert in praktisch allen modernen Browserversionen relevanter Anbieter. Die einzige Ausnahme stellt Opera dar, dessen neueste Version (derzeit 11.10) mit der Drag-und-Drop-API nichts anzufangen weiß. Bei Browsern ohne Drag-und-Drop-Fähigkeiten empfiehlt sich der Einsatz einer Fallback-Routine unter Verwendung der Modernizr-Bibliothek:
if (Modernizr.draganddrop) {
// Code fuer Webbrowser mit Unterstuetzung fuer Drag-und-Drop in HTML5
} else {
// Fallback
}Der Vorteil der Erkennung einzelner Fähigkeiten eines Browsers mittels einer Bibliothek wie Modernizr statt der bloßen Erkennung der Browserversion ist unbestritten.
