Modernes Webdesign

Das dataTransfer-Objekt

9.9.2011 von Anna Kobylinska und Filipe Pereira Martins

ca. 2:05 Min

Ratgeber

Damit das Loslassen des betreffenden Elementes auf eine Drop-Zone tatsächlich ein konkretes Resultat zur Folge hat, gilt es noch, die Funktion handleDrop zu definieren. Hier kommt das dataTransfer-Objekt ins Spiel.

Das dataTransfer-Objekt

Das dataTransfer-Objekt ist für die korrekte Funktionsweise eines Drag-und-Drop-Vorgangs von zentraler Bedeutung, denn es beinhaltet die Daten, die mittels Drag-und-Drop übergeben werden sollen. Diese Daten werden beim dragstart-Ereignis in der dataTransfer-Eigenschaft erfasst und beim drop-Ereignis ausgelesen, modifiziert oder gelöscht. Der Aufruf

e.dataTransfer.setData(format,
inhalt)

weist dem betreffenden Objekt den gewünschten Mimetyp (format) und die Daten (inhalt) als Argumente zu.So können Sie zum Beispiel das HTML-Markup des Ausgangsknotens ins dataTransfer-Objekt einlesen:

var dragSrcEl = null;
function handleDragStart(e) {
// Ausgangsknoten
this.style.opacity = '0.4';
dragSrcEl = this;
e.dataTransfer.effectAllowed =
'move';
e.dataTransfer.setData('text/html',
this.innerHTML);
}

Mittels der getData(format)-Methode lassen sich die drag-Daten des aktuellen Vorgangs einlesen. Die passende Umsetzung könnte wie folgt aussehen:

function handleDrop(e) {
// das aktuelle Zielelement
if (e.stopPropagation) {
e.stopPropagation();
}
if (dragSrcEl != this)
{
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.
getData('text/html');
}
return false;
}

Solange es sich beim Zielelement und dem Ausgangsknoten nicht um ein und dasselbe Element handelt, wird das HTML-Markup des Ausgangselementes durch das HTML-Markup des Zielelementes ersetzt. Übernommen wird hierbei nur das HTML-Markup des betreffenden Vaterelementes sowie das HTML-Markup samt inline-CSS untergeordneter Elemente. Im Falle von

<div class="spalte warenkorb"
draggable="true"><header style="color: #B3C4FF;">Warenkorb</header></div>

Nur noch Opera fehlen heute Drag-und-Drop-Fähigkeiten auf Basis von HTML5.

etwa wandert die Klasse warenkorb nicht mit, wohl aber die CSS-Eigenschaft(en) von <header>. Drag-und-Drop ist mittlerweile bei Desktop-Applikationen zur Selbstverständlichkeit geworden, sodass es nahe liegt, diese intuitive Benutzerführung auch auf Websites durchgängig verfügbar zu machen. Da HTML5 in der Praxis schneller zum allgemeinen Standard avancierte als ursprünglich geplant, ist die Implementierung von Drag-und-Drop auf Basis von HTML5 in modernen Browsern ein Leichtes geworden.Die globale Variable dragSrcEl vereinfacht das Verschieben der verschiedenen div-Kästen. In der Funktion handleDragStart() ist innerHTML das Ausgangselement, welches in der Variable gespeichert und später in handleDrop() ausgelesen wird, um den Ausgangs- und Zielkasten zu vertauschen.

Dragging-Eigenschaften

Das dataTransfer-Objekt stellt Eigenschaften zur Verfügung, um dem Website-Besucher visuelles Feedback zu geben oder das Verhalten der Drop-Zone nach Datentyp zu steuern.Mittels dataTransfer.effectAllowed lassen sich die Eigenschaften des Drag-und-Drop-Vorgangs fein granuliert festlegen. Diese Eigenschaft kann die Werte none, copy, copyLink, copyMove, link, linkMove, move, all und uninitialized annehmen. Durch den Einsatz von dataTransfer.effectAllowed initialisiert man die dropEffect-Eigenschaft während der dragenter- und dragover-Events.Die Eigenschaft dataTransfer.dropEffect zeichnet für eine wunschgemäße Reaktion auf das Besucherverhalten durch angemessenes Feedback während der dragenter- und dragover-Events verantwortlich. Während der Besucher mit der Maus über dem betreffenden Element schwebt, wird das zu erwartende Verhalten des Browsers (none, copy, link, move) durch die geänderte Form des Mauszeigers kenntlich gemacht.