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

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​".