HTML Drag and Drop API
In HTML kann jedes Element per Drag & Drop verschoben werden.
Beispiel
Ziehen Sie das W3Schools-Bild in das Rechteck.
Drag and Drop
Drag and Drop ist eine sehr häufige Funktion. Dabei „greifen“ Sie ein Objekt und ziehen es an eine andere Stelle.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die Drag & Drop vollständig unterstützt.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML-Drag-and-Drop-Beispiel
Das folgende Beispiel ist ein einfaches Drag-and-Drop-Beispiel:
Beispiel
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Try it Yourself »Es mag kompliziert erscheinen, aber lassen Sie uns die verschiedenen Teile eines Drag-and-Drop-Ereignisses durchgehen.
Machen Sie ein Element ziehbar
Zuallererst: Um ein Element ziehbar zu machen, setzen Sie das Attribut draggable auf true:
<img draggable="true">
Was zu Drag - ondragstart und setData()
Geben Sie dann an, was passieren soll, wenn das Element gezogen wird.
Im obigen Beispiel ruft das Attribut ondragstart eine Funktion namens „drag(event)“ auf, die angibt, welche Daten gezogen werden sollen.
Die Methode dataTransfer.setData() legt den Datentyp und den Wert der gezogenen Daten fest:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
In diesem Fall ist der Datentyp "text" und der Wert ist die ID des ziehbaren Elements ("drag1").
Wo Drop — ondragover
Das ondragover-Ereignis gibt an, wo die gezogenen Daten abgelegt werden können.
Standardmäßig können Daten/Elemente nicht in anderen Elementen abgelegt werden. Um einen Drop zu ermöglichen, müssen wir die Standardbehandlung des Elements verhindern.
Dies geschieht durch Aufrufen der Methode event.preventDefault() für das ondragover-Ereignis:
event.preventDefault()
Machen Sie den Drop - ondrop
Wenn die gezogenen Daten abgelegt werden, tritt ein Drop-Ereignis auf.
Im obigen Beispiel ruft das Attribut ondrop eine Funktion auf, drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Code erklärt:
- Rufen Sie „preventDefault()“ auf, um die Standardverarbeitung der Daten durch den Browser zu verhindern (Standard ist „Öffnen als Link beim Ablegen“)
- Rufen Sie die gezogenen Daten mit der Methode dataTransfer.getData() ab. Diese Methode gibt alle Daten zurück, die in der setData()-Methode auf denselben Typ festgelegt wurden
- Die gezogenen Daten sind die ID des gezogenen Elements („drag1“)
- Hängen Sie das gezogene Element an das Drop-Element an
Mehr Beispiele
Beispiel
So ziehen (und legen) Sie ein Bild zwischen zwei <div>-Elementen hin und her:
