Modernes Webdesign

Standardverhalten unterdrücken

Autoren: Anna Kobylinska und Filipe Pereira Martins • 9.9.2011 • ca. 1:40 Min

Inhalt

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

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. Für jeden Ereignistyp ändern sich hierbei this.target und e.target in Abhängigkeit von der aktuellen Phase der Ereignisauswertung.

Standardverhalten unterdrücken

Für einige Elementtypen wie eine Verknüpfung gilt es, das Standardverhalten des Browsers zu unterdrü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 für das dragover-Ereignis aufgerufen und zusätzlich mittels:

return false

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

der false-Wert zurückgeliefert. Um die over-Klasse ein- und auszuschalten, kommt dragenter statt dragover ins Spiel. Beim Einsatz von dragover würde die CSS-Klasse mehrmals erzeugt und entfernt werden, denn der dragover-Ereignislistener würde das Hin-und-her-Schweben der Maus über den Spalten kontinuierlich auswerten und die Rendering-Engine des Browsers mit einer hohen Anzahl überflüssiger Redraws belasten.Zum Hinzufügen und Entfernen der benötigten Klasse können Sie entweder die Element.classList-API (die leider noch nicht auf breite Unterstü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 für ein drop- als auch für ein dragend-Ereignis. Der Ereignishandler für die dragend-Ereignisse entfernt die over-Klasse von jedem Element.Um unerwünschte Redirects zu verhindern, muss der zugehörige Ereignishandler das Standardverhalten des Browsers für drop-Ereignisse unterdrü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);
});