HTML draggable-Attribut
Das HTML draggable-Attribut legt fest, ob ein Element ziehbar ist. Erfahren Sie, wie es funktioniert und auf welchen Elementen es verwendet werden kann.
Das HTML-Attribut draggable ist ein aufgezähltes Attribut, das festlegt, ob ein Element vom Benutzer mit einem Zeigegerät (Maus oder Touch) gezogen werden kann. Es ist der Einstiegspunkt in die HTML Drag and Drop API, mit der Sie Elemente, Text, Dateien oder benutzerdefinierte Daten von einer Stelle auf einer Seite an eine andere verschieben können.
Das Setzen von draggable="true" macht ein Element nur greifbar. Um etwas tatsächlich zu verschieben und an einem nützlichen Ort abzulegen, müssen Sie auch die Drag-and-Drop-Events behandeln und Informationen über das dataTransfer-Objekt weitergeben — beides wird weiter unten behandelt.
Sie können dieses Attribut auf jedem HTML-Element verwenden. Es ist Teil der Global Attributes und funktioniert daher zusammen mit anderen globalen Attributen wie contenteditable.
Werte
Das draggable-Attribut kann die folgenden Werte annehmen:
true— das Element kann gezogen werden.false— das Element kann nicht gezogen werden. Nützlich, um das standardmäßige Ziehen von Bildern und Links zu deaktivieren.auto— verwendet das Standardverhalten des Browsers für dieses Element. In der Praxis bedeutet dies, dass Bilder und Links ziehbar sind und die meisten anderen Elemente nicht. Daautoschlicht das Standardverhalten übernimmt, wird es selten explizit geschrieben; das Weglassen vondraggableführt zum gleichen Ergebnis.
<tag draggable="true|false|auto"></tag>Hinweis:
draggableist kein boolean-Attribut. Sie müssen den Wert explizit angeben —draggableallein oderdraggable=""ist ungültig. Verwenden Sie immerdraggable="true"oderdraggable="false".
Wie Drag and Drop funktioniert
Eine Drag-and-Drop-Interaktion löst eine Abfolge von Events aus, aufgeteilt zwischen dem gezogenen Element (der Quelle) und dem Element, auf dem es abgelegt wird (dem Ziel):
| Event | Wird ausgelöst auf | Wann |
|---|---|---|
dragstart | Quelle | Der Benutzer beginnt, das Element zu ziehen. Legen Sie hier Ihre Daten mit dataTransfer.setData() fest. |
drag | Quelle | Wiederholt, während das Element gezogen wird. |
dragenter | Ziel | Das gezogene Element betritt ein gültiges Ablageziel. |
dragover | Ziel | Wiederholt, während das Element über einem Ablageziel schwebt. Rufen Sie hier preventDefault() auf. |
dragleave | Ziel | Das gezogene Element verlässt das Ablageziel. |
drop | Ziel | Das Element wird über dem Ziel losgelassen. Lesen Sie hier Ihre Daten mit dataTransfer.getData(). |
dragend | Quelle | Das Ziehen endet (egal ob erfolgreich abgelegt oder abgebrochen). |
Das dataTransfer-Objekt
Jedes Drag-Event stellt event.dataTransfer bereit, den Kanal zur Übertragung von Daten von der Quelle zum Ziel:
event.dataTransfer.setData(format, data)— speichert einen string währenddragstart. Dasformatist in der Regel ein MIME-Typ wie"text/plain"(älterer Code verwendet"Text", was weiterhin funktioniert).event.dataTransfer.getData(format)— liest diesen string währenddropzurück.
Da Daten erst beim drop verfügbar werden, besteht das typische Muster darin, die id eines Elements (oder einen anderen Bezeichner) in dragstart zu speichern und es dann in drop zu suchen und zu verschieben.
Warum preventDefault() erforderlich ist
Standardmäßig sind die meisten Elemente keine gültigen Ablageziele, sodass der Browser das Ablegen abbricht. Um ein Element als Ablagezone zu aktivieren, müssen Sie event.preventDefault() in seinem dragover-Handler aufrufen — das signalisiert dem Browser: „Ja, hier ist ein Ablegen erlaubt." Es ist auch üblich, preventDefault() im drop-Handler aufzurufen, um die Standardaktion des Browsers zu unterbinden (z. B. das Navigieren zu einem gezogenen Link oder das Öffnen einer abgelegten Datei).
Wenn Sie preventDefault() in dragover vergessen, wird das drop-Event niemals ausgelöst und es passiert nichts.
Beispiel (Inline-Handler)
Dieses Beispiel verwendet Inline-Event-Handler-Attribute (ondragstart, ondragover, ondrop). Es ist kompakt, mischt jedoch JavaScript in das Markup:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<style>
#rectId {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(event) {
event.preventDefault(); // Allow dropping
}
function drag(event) {
// Store the dragged element's ID in the dataTransfer object
event.dataTransfer.setData("text/plain", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain"); // Retrieve the ID
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="rectId" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="dragId" draggable="true" ondragstart="drag(event)">
This is a draggable paragraph. Drag this item to the rectangle.
</p>
</body>
</html>Beispiel (modernes addEventListener)
Für wartbaren Code halten Sie das Markup sauber und fügen Handler in JavaScript mit addEventListener hinzu. Dies ist der empfohlene Ansatz:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<style>
#dropzone {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="dropzone"></div>
<br />
<p id="item" draggable="true">
This is a draggable paragraph. Drag this item to the rectangle.
</p>
<script>
const item = document.getElementById("item");
const dropzone = document.getElementById("dropzone");
// Source: store the dragged element's ID when the drag begins.
item.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text/plain", event.target.id);
});
// Target: allow dropping by preventing the default handling.
dropzone.addEventListener("dragover", (event) => {
event.preventDefault();
});
// Target: move the element into the drop zone.
dropzone.addEventListener("drop", (event) => {
event.preventDefault();
const id = event.dataTransfer.getData("text/plain");
const dragged = document.getElementById(id);
event.currentTarget.appendChild(dragged);
});
</script>
</body>
</html>Barrierefreiheit
Das draggable-Attribut bietet von sich aus keine Tastatur- oder Screenreader-Unterstützung — Drag and Drop ist eine reine Zeigegerät-Interaktion. Benutzer, die per Tastatur oder Hilfstechnologie navigieren, können ein natives Ziehen nicht durchführen.
Wenn Drag and Drop die einzige Möglichkeit ist, eine Aktion abzuschließen, bieten Sie immer eine barrierefreie Alternative an (zum Beispiel Schaltflächen „Nach oben / Nach unten", ein Auswahlmenü oder Kopieren/Einfügen). Behandeln Sie natives Drag and Drop als Erweiterung, nicht als einzigen Weg.