HTML5 Drag and Drop (Drag and Drop) ist Teil des HTML5-Standards.

Drag and Drop (Drag and drop) ist eine gängige Funktion, bei der ein Objekt ergriffen und an eine andere Stelle gezogen wird.

wirdexample.comZiehen Sie Symbole in ein rechteckiges Feld.

Drag and Drop

Das Ziehen ist eine gängige Funktion, mit der Objekte ergriffen und an eine andere Stelle gezogen werden können.

In HTML5 ist das Ziehen eine Standardfunktion, mit der jedes Element gezogen werden kann.

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Ziehen.

Hinweis:Safari 5.1.2 unterstützt das Ziehen nicht.

HTML5 Drag-and-Drop-Beispiel

Das folgende Beispiel ist ein einfaches Drag-and-Drop-Beispiel:

Beispiel

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Beispiel-Tutorial (example.com)</title> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <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> <p>Ziehen Sie das Bild example.com in ein rechteckiges Feld:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>

Probieren Sie es aus »

Es mag kompliziert aussehen, aber wir können die verschiedenen Teile der Drag-and-Drop-Ereignisse getrennt untersuchen.

Machen Sie das Element ziehbar

Zuerst: Um ein Element ziehbar zu machen, setzen Sie das draggable-Attribut auf true:

<img draggable="true">

Was gezogen wird - ondragstart und setData()

Dann geben Sie an, was geschieht, wenn das Element gezogen wird.

Im obigen Beispiel ruft das ondragstart-Attribut eine Funktion auf, drag(event), die die Daten angibt, die gezogen werden.

Die Methode dataTransfer.setData() legt den Datentyp und den Wert der gezogenen Daten fest:

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

Text steht für den Typ der Daten, die dem gezogenen Objekt hinzugefügt werden. Der Wert ist die id des draggable-Elements ("drag1").

Wohin ablegen - ondragover

Das ondragover-Ereignis gibt an, wo die gezogenen Daten platziert werden sollen.

Standardmäßig können Daten oder Elemente nicht in andere Elemente platziert werden. Um das Platzieren zu ermöglichen, müssen wir die Standardbehandlung des Elements verhindern.

Dies erfolgt durch Aufrufen der Methode event.preventDefault() des ondragover-Ereignisses:

event.preventDefault()

Drop - ondrop

Beim Ablegen der gezogenen Daten tritt das Drop-Ereignis auf.

Im obigen Beispiel ruft das ondrop-Attribut eine Funktion auf, drop(event):

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

Code-Erklärung:

  • preventDefault() wird aufgerufen, um die Standardbehandlung der Daten durch den Browser zu vermeiden (das Standardverhalten des Drop-Ereignisses ist das Öffnen des Links).
  • Verwenden der Methode dataTransfer.getData("Text"), um die gezogenen Daten abzurufen. Diese Methode gibt alle Daten desselben Typs zurück, die in der Methode setData() festgelegt wurden.
  • Die gezogenen Daten sind die ID des gezogenen Elements ("drag1").
  • Das gezogene Element an das Zielelement (das Drop-Ziel) anhängen.

Examples

Weitere Beispiele

Bilder hin- und herziehen
Wie man Bilder zwischen zwei <div>-Elementen zieht.

Andere Erweiterungen