HTMLElement.draggable — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.draggable

Beschreibung

Die Eigenschaft draggable spiegelt das globale HTML-Attribut draggable wider. Ist sie true, kann der Benutzer das Element mit der Maus (bzw. per Touch in unterstützenden Browsern) aufnehmen und ziehen. Dabei werden die Drag-Events dragstart, drag und dragend am Element ausgelöst.

Ohne ausdrückliche Angabe gilt das Standardverhalten des Browsers: Bilder (<img>), Links mit href und markierter Text lassen sich standardmäßig ziehen. Alle anderen Elemente liefern false. Mit element.draggable = true machst du beliebige Elemente wie <div> oder <li> ziehbar, mit false schaltest du z. B. das native Ziehen von Bildern ab.

Typische Einsatzfälle sind sortierbare Listen, Kanban-Boards, Datei-Ablagen oder das Verhindern, dass Logos und Icons versehentlich herausgezogen werden. Wird die Eigenschaft gesetzt, schreibt der Browser das Attribut als draggable="true" bzw. draggable="false" ins DOM.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	abhängig vom Element (true bei <img> und <a href>, sonst false)	Beim Setzen: `true` macht das Element ziehbar, `false` verhindert das Ziehen. Andere Werte werden in einen Boolean umgewandelt.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element ziehbar ist, sonst false. Berücksichtigt auch das Standardverhalten des Browsers bei Bildern und Links.

Beispiele

Standardwerte auslesen

const img = document.createElement('img');
const link = document.createElement('a');
link.href = 'https://example.com';
const div = document.createElement('div');

console.log(img.draggable);  // Bilder sind standardmäßig ziehbar
console.log(link.draggable); // Links mit href ebenfalls
console.log(div.draggable);  // normale Elemente nicht

true true false

Listeneinträge ziehbar machen und Daten übergeben

const items = document.querySelectorAll('#aufgaben li');

items.forEach((item) => {
  item.draggable = true;
  item.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text/plain', item.id);
    event.dataTransfer.effectAllowed = 'move';
    item.classList.add('wird-gezogen');
  });
  item.addEventListener('dragend', () => {
    item.classList.remove('wird-gezogen');
  });
});

console.log(items[0]?.getAttribute('draggable'));

true

Natives Ziehen von Bildern unterbinden

// Logos und Icons sollen nicht versehentlich herausgezogen werden
document.querySelectorAll('img.logo, img.icon').forEach((img) => {
  img.draggable = false;
});

const logo = document.querySelector('img.logo');
if (logo) console.log(logo.draggable, logo.outerHTML.includes('draggable="false"'));

false true

Ziehen im Bearbeitungsmodus ein- und ausschalten

const karte = document.querySelector('.karte');
const schalter = document.querySelector('#bearbeiten');

schalter.addEventListener('change', () => {
  karte.draggable = schalter.checked;
  console.log(`Karte ziehbar: ${karte.draggable}`);
});

Karte ziehbar: true

// Wichtig · Fallstricke

Attribut ist kein boolesches Attribut: Im HTML muss draggable="true" ausgeschrieben werden. Ein bloßes <div draggable> oder draggable="" macht das Element nicht ziehbar (Zustand „auto“).
Nur Ziehen, kein Ablegen: draggable regelt ausschließlich die Quelle. Damit ein Ziel Drops annimmt, muss im dragover-Handler event.preventDefault() aufgerufen und drop behandelt werden.
Firefox: Ältere Versionen starten das Ziehen nur, wenn im dragstart-Handler per dataTransfer.setData() Daten gesetzt werden.
Touch-Geräte: Die HTML-Drag-and-Drop-API wird auf Mobilgeräten erst seit neueren Versionen (z. B. iOS Safari 15+, Chrome Android) unterstützt; für breite Kompatibilität sind Pointer-Events eine Alternative.
Textauswahl und Formularfelder: In ziehbaren Elementen lässt sich Text schwer markieren; <input>-Felder darin können sich unerwartet verhalten. Ggf. draggable nur an einem Griff-Element setzen.
Barrierefreiheit: Drag and Drop ist nicht per Tastatur bedienbar – biete immer eine alternative Bedienmöglichkeit (z. B. Schaltflächen zum Verschieben) an.

Siehe auch

DataTransfer DragEvent HTMLElement HTMLElement.dataset HTMLElement.translate