HTML -Drag-and-Drop-API
In HTML kann jedes Element gezogen und abgelegt werden.
Beispiel
Ziehen Sie das W3Schools-Bild in das Rechteck.
Ziehen und ablegen
Drag & Drop ist eine sehr verbreitete Funktion. Es ist, wenn Sie ein Objekt "greifen" und es an eine andere Stelle ziehen.
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>
Es mag kompliziert erscheinen, aber gehen wir die verschiedenen Teile eines Drag-and-Drop-Ereignisses durch.
Machen Sie ein Element ziehbar
Zunächst einmal: Um ein Element ziehbar zu machen, setzen Sie das draggableAttribut auf true:
<img draggable="true">
Was soll gezogen werden - ondragstart und setData()
Geben Sie dann an, was passieren soll, wenn das Element gezogen wird.
Im obigen Beispiel ondragstartruft das Attribut eine Funktion auf, drag(event), die angibt, welche Daten gezogen werden sollen.
Die dataTransfer.setData()Methode 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“).
Wohin fallen lassen - ondrago
Das ondragoverEreignis 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 zuzulassen, müssen wir die Standardbehandlung des Elements verhindern.
Dies geschieht durch Aufrufen der event.preventDefault()Methode für das Ereignis ondragover:
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 drop(event) auf:
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 standardmäßige Verarbeitung der Daten durch den Browser zu verhindern (standardmäßig ist der Link beim Ablegen geöffnet).
- Rufen Sie die gezogenen Daten mit der Methode dataTransfer.getData() ab. Diese Methode gibt alle Daten zurück, die in der Methode setData() auf denselben Typ gesetzt 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: