Signatur
Beschreibung
Die Eigenschaft types des DataTransfer-Objekts liefert ein schreibgeschütztes Array von Zeichenketten. Es enthält die Formate, die mit setData() gesetzt wurden oder die die Quelle eines Drag-&-Drop- bzw. Zwischenablage-Vorgangs bereitstellt. Typische Werte sind MIME-Typen wie "text/plain", "text/html" und "text/uri-list". Werden Dateien gezogen, steht zusätzlich der besondere Eintrag "Files" im Array.
Gebraucht wird types vor allem in den Handlern von dragenter und dragover. Dort liefert getData() aus Sicherheitsgründen (geschützter Modus) noch leere Zeichenketten. types ist dagegen schon lesbar. Damit kannst du früh entscheiden, ob eine Drop-Zone den gezogenen Inhalt annimmt, und nur dann event.preventDefault() aufrufen.
Die Reihenfolge der Einträge entspricht der Reihenfolge, in der die Daten hinzugefügt wurden. Früher gab die Eigenschaft eine DOMStringList zurück. In aktuellen Browsern ist es ein eingefrorenes Array. Zum Prüfen nimmst du also includes() statt contains().
Rückgabewert
"Files". Gibt es keine Daten, ist es leer.Beispiele
Drop-Zone nur für Dateien freigeben
const zone = document.querySelector('#upload');
const istDatei = (event) => event.dataTransfer.types.includes('Files');
zone.addEventListener('dragover', (event) => {
if (!istDatei(event)) return; // Drop nicht erlaubt
event.preventDefault(); // Drop erlauben
event.dataTransfer.dropEffect = 'copy';
zone.classList.add('aktiv');
});
zone.addEventListener('dragleave', () => zone.classList.remove('aktiv'));
zone.addEventListener('drop', (event) => {
event.preventDefault();
zone.classList.remove('aktiv');
const dateien = [...event.dataTransfer.files];
console.log(dateien.map((f) => f.name));
});Gesetzte Typen beim Drag-Start anzeigen
const karte = document.querySelector('#karte');
karte.draggable = true;
karte.addEventListener('dragstart', (event) => {
const dt = event.dataTransfer;
dt.setData('text/plain', 'Karte 42');
dt.setData('application/x-karte-id', '42');
console.log(dt.types);
});Bestes Format beim Einfügen wählen
document.addEventListener('paste', (event) => {
const { types } = event.clipboardData;
if (types.includes('text/html')) {
console.log('HTML:', event.clipboardData.getData('text/html'));
} else if (types.includes('text/plain')) {
console.log('Text:', event.clipboardData.getData('text/plain'));
}
event.preventDefault();
});Eigenen Typ schon in dragenter erkennen
const ablage = document.querySelector('#ablage');
ablage.addEventListener('dragenter', (event) => {
// getData() liefert hier noch '', types ist aber bereits lesbar
if (event.dataTransfer.types.includes('application/x-karte-id')) {
event.preventDefault();
ablage.classList.add('bereit');
}
});// Wichtig · Fallstricke
- Kein
contains()mehr: Ältere Browser (z. B. Firefox vor Version 52 und der alte Edge) gaben eineDOMStringListzurück. Wenn du alte Browser unterstützen musst:Array.from(dt.types).includes(...)funktioniert mit beiden Varianten. - Groß- und Kleinschreibung: Mit
setData()gesetzte Typen werden in Kleinbuchstaben umgewandelt. Prüfe also auf"application/x-karte-id"und nicht auf eine gemischte Schreibweise. - Geschützter Modus: In
dragenterunddragoversind nur die Typen lesbar, nicht die Daten selbst. Deshalb eignet sichtypeshier gut für die Vorprüfung. - Eigene Typen über Fenster hinweg: Wird zwischen Fenstern oder Anwendungen gezogen, kommen nicht jeder eigene MIME-Typ und nicht jede Groß-/Kleinschreibung zuverlässig an. Beim Ziehen aus dem Betriebssystem gibt es je nach Browser unterschiedliche Zusatztypen.
- Sicherheit: Werte, die du über
getData('text/html')liest, stammen von außen. Füge sie nie ungefiltert perinnerHTMLein, sonst droht XSS. Bereinige sie vorher, z. B. mit DOMPurify. - Das Array ist eingefroren. Versuche, es zu verändern, wirken nicht und lösen im Strict Mode einen Fehler aus.