Drag-und-Drop mit HTML5

1. Drag-und-Drop mit HTML5
2. Ereignisse eines Vorgangs
3. Standardverhalten unterdrücken
4. Das dataTransfer-Objekt
5. Upload von Dateien

© Internet Magazin

Praktisch in allen gängigen Webbrowsern kann der Benutzer eine Textauswahl sowie img- und anchor-Elemente, die über ein href-Attribut verfügen, per Drag-und-Drop auf den Desktop ziehen. Greift der Benutzer ein Bild und zieht es aus der Webseite heraus, lässt sich dieses in der Adressleiste als ein Element vom Typ <input type="file"/> oder auf dem Desktop als eine Bilddatei ablegen. Diese Funktionalität hat natürlich nichts mit HTML5 zu tun, sie demonstriert aber, dass Drag-und-Drop-Fähigkeiten im Browser gefragt und daraus nicht mehr wegzudenken sind.Die Drag-und-Drop-Funktionalität in Webseiten ließ sich zuvor mit JavaScript-Bibliotheken umsetzen, doch der erhebliche Aufwand machte diese Lösung nicht sonderlich populär. Mit HTML5 könnte sich dies nun endgültig ändern.Die HTML5-Spezifikation definiert einen ereignisbasierten Mechanismus, eine JavaScript-API und zusätzliches Markup, mit deren Hilfe fast jedes beliebige Seitenelement drag-und-drop-fähig gemacht werden kann. Anwendungsbereiche für Drag-und-Drop gibt es mehr als genug. Von Widgets in einem CMS, die sich durch den Besucher neu anordnen lassen, über einen BTO-Bestellungsassistenten für Waren, einen interaktiven Warenkorb mit Produkten zum Anfassen bis hin zu Online-Spielen sind die Einsatzmöglichkeiten sehr breit gefächert.Die Bedeutung von Drag-und-Drop für die Bedienungsfreundlichkeit einer Webapplikation lässt sich am Beispiel eines Online-Schachspiels verdeutlichen. Dank Drag-und-Drop-Unterstützung im Browser müsste der Benutzer die Schachzüge nicht mehr per Schachnotation eingeben. Ein wirklich unterhaltsames Schachspiel per Tastatureingabe der Anfangs- und Zielposition von Schachfiguren wäre kaum vorstellbar, wenn man doch so leicht zur Maus greifen kann.

Website-Inhalte kennzeichnen

Einige HTML-Elemente wie anchor und img sind von sich aus drag-und-drop-fähig. Anderen Elementen muss man diese Möglichkeit durch die explizite Zuweisung der Eigenschaft draggable="true"

<div draggable="true"></div>

und das Anfügen einer passenden CSS-Regel für den jeweiligen Browser erst einmal beibringen:

[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}

© Internet Magazin

Mit diesem Code können Sie sicherstellen, dass Textinhalte in drag-fähigen Elementen durch den Besucher nicht mehr ausgewählt werden können, sodass einem Drag-und-Drop-Vorgang nichts im Wege steht.Fast jedes beliebige HTML5-Element, darunter ein Bild, eine Liste, ein Weblink oder ein anderer Ausschnitt des HTML-Markups, kann mittels Drag-und-Drop gehandhabt werden. Im Gegensatz dazu gibt es bei der Wahl der so genannten Drop-Zone, welche die Daten entgegennimmt, deutlich weniger Freiheiten. So eignet sich für diese Aufgabe ein Bild zum Beispiel nicht, wohl aber ein div-Kasten. Das Markup

<div id="spalten"><div class="spalte warenkorb"
draggable="true"><header>Warenkorb</header></div><div class="spalte favoriten"
draggable="true"><header>Favoriten</header></div><div class="spalte zuletzt"
draggable="true"><header>Zuletzt gesehen</header></div></div>

erzeugt drei Layout-Kästen, die sich mit der Maus anfassen lassen.

Der CSS-Code 1 per Download von www.internet-magazin.de stellt die obigen Textkästen als Spalten dar.Zusätzlich benötigt man den zuvor erwähnten CSS-Regelsatz für den Selektor [draggable]. Durch die Zuweisung des Attributs

cursor: move;

zu allen Elementen der Klasse "spalte" erhält der Besucher einen visuellen Anhaltspunkt. Durch den Wechsel der Form des Mauszeigers beim Kontakt mit dem jeweiligen Element wird verdeutlicht, dass die Spalten beweglich und damit auch drag-und-drop-fähig sind.