Modernes Webdesign

Standardverhalten unterdrücken

Zur visuellen Unterscheidung zwischen dem aktiven und inaktiven Zustand des betroffenen Elementes entsteht erst einmal eine neue CSS-Regel wie diese:

.spalte.over {
border: 2px dashed #000;
}

Das Verhalten in Bezug auf visuelles Feedback definiert der JavaScript-Code 1, den Sie ebenfalls zum Download unter www.internet-magazin.de finden. Für jeden Ereignistyp ändern sich hierbei this.target und e.target in Abhängigkeit von der aktuellen Phase der Ereignisauswertung.

Standardverhalten unterdrücken

Für einige Elementtypen wie eine Verknüpfung gilt es, das Standardverhalten des Browsers zu unterdrücken, damit dieses nicht mit dem Drag-und-Drop-Vorgang interferieren kann. Beim Mauskontakt mit einem Weblink soll der Browser diesen ignorieren, statt ihm wie gewohnt zu folgen. Hierzu wird e.preventDefault() im Ereignishandler für das dragover-Ereignis aufgerufen und zusätzlich mittels:

return false

image.jpg

© Internet Magazin

Drag-und-Drop auf Basis von reinem HTML5 in Aktion.

der false-Wert zurückgeliefert. Um die over-Klasse ein- und auszuschalten, kommt dragenter statt dragover ins Spiel. Beim Einsatz von dragover würde die CSS-Klasse mehrmals erzeugt und entfernt werden, denn der dragover-Ereignislistener würde das Hin-und-her-Schweben der Maus über den Spalten kontinuierlich auswerten und die Rendering-Engine des Browsers mit einer hohen Anzahl überflüssiger Redraws belasten.Zum Hinzufügen und Entfernen der benötigten Klasse können Sie entweder die Element.classList-API (die leider noch nicht auf breite Unterstützung durch Browser verweisen kann) oder eine Bibliothek wie jQuery einspannen oder aber alternativ eigene jQuery-artige Helferklassen definieren, etwa mit Prototype.

Vervollständigen des Vorgangs

Um das abschließende drop-Ereignis (das Loslassen des betreffenden Elementes) auszuwerten, benötigt man einen passenden Ereignislistener sowohl für ein drop- als auch für ein dragend-Ereignis. Der Ereignishandler für die dragend-Ereignisse entfernt die over-Klasse von jedem Element.Um unerwünschte Redirects zu verhindern, muss der zugehörige Ereignishandler das Standardverhalten des Browsers für drop-Ereignisse unterdrücken. Um das so genannte Event Bubbling in der DOM-Struktur zu verhindern, kommt die Methode e.stopPropagation() zum Einsatz. Der resultierende Quelltext sieht wie folgt aus:

function handleDrop(e) {
// aktuelles Zieleelement
if (e.stopPropagation) {
e.stopPropagation(); // verhindert
eine Umleitung
}
// betr. DataTransfer-Objekt
return false;
}
function handleDragEnd(e) {
// Ausgangsknoten
[].forEach.call(cols, function
(col) {
col.removeClassName('over');
this.style.opacity = '1'; this.style.
opacity = '1'; // Opazitaet zuruecksetzen
});
}

Schließlich werden alle Ereignislistener ihrem jeweiligen Ereignistyp zugewiesen:

var cols = document.querySelectorAll
('#spalten .spalte');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart',
handleDragStart, false);
col.addEventListener('dragenter',
handleDragEnter, false)
col.addEventListener('dragover',
handleDragOver, false);
col.addEventListener('dragleave',
handleDragLeave, false);
col.addEventListener('drop',
handleDrop, false);
col.addEventListener('dragend',
handleDragEnd, false);
});

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…