Modernes Webdesign

Upload von Dateien

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
:http://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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".