HTML5-Ziehen und Loslassen

Ziehen Sie das CodeW3C.com Bild in das Rechteck.

Drag-and-Drop

Drag-and-Drop (Drag und Drop) ist eine sehr häufige Eigenschaft. Es bezieht sich darauf, etwas zu greifen und an einen anderen Ort zu ziehen.

Drag-and-Drop ist ein Bestandteil des HTML5-Standards: Jedes Element ist verschiebbar.

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die Drag-and-Drop vollständig unterstützt.

API
Drag-and-Drop 4.0 9.0 3.5 6.0 12.0

HTML Drag-and-Drop-Beispiel

Nachstehend ist ein einfaches Beispiel zur Drag-and-Drop-Funktion:

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>

Selbst ausprobieren

Es mag etwas kompliziert aussehen, aber lassen Sie uns die verschiedenen Teile des Drag-and-Drop-Ereignisses untersuchen.

Ein Element als verschiebbar einrichten

Zunächst: Um ein Element als verschiebbar zu setzen, stellen Sie das draggable-Attribut auf true:

<img draggable="true">

Inhalte per Drag-and-Drop - ondragstart und setData()

Dann wird bestimmt, was passiert, wenn das Element verschoben wird.

Im obigen Beispiel ruft die ondragstart-Attribut eine drag(event)-Funktion auf, um zu bestimmen, welche Daten verschoben werden sollen.

Die Methode dataTransfer.setData() setzt den Datentyp und den Wert der verschiebbaren Daten:

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

In diesem Beispiel ist der Datentyp "text" und der Wert die ID dieses verschiebbaren Elements ("drag1").

Wo hin ziehen - ondragover

Das ondragover-Ereignis definiert, wo die verschobenen Daten platziert werden können.

Standardmäßig können Daten/Elemente nicht in andere Elemente gelegt werden. Um das Drag & Drop zu ermöglichen, müssen wir dieses Standardverhalten des Elements verhindern.

Diese Aufgabe wird durch die Methode event.preventDefault() des ondragover-Ereignisses erfüllt:

event.preventDefault();

Platzieren - ondrop

Wenn die verschobenen Daten freigegeben werden, tritt das Drop-Ereignis auf.

Im obigen Beispiel wird die ondrop-Attribute eine Funktion aufgerufen, drop(event):

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

Code-Übersetzung:

  • Aufruf von preventDefault() um die Standardverarbeitung des Browsers der Daten zu verhindern (die Standardverhalten des Drop-Ereignisses ist, die Daten als Link zu öffnen)
  • Durch das Methode getData() von dataTransfer wird die verschobenen Daten erhalten. Diese Methode gibt zurück, welche Daten, die im Methode setData() mit gleicher Art gesetzt wurden
  • Die verschobenen Daten sind die id des verschobenen Elements ("drag1")
  • Fügen Sie das verschobene Element dem Platzierungselement hinzu

Mehr Beispiele

Hin- und herbewegen von Bildern

Wie man ein Bild zwischen zwei <div>-Elementen hin- und herzieht:

Ziehen Sie das CodeW3C.com Bild in das Rechteck.

Selbst ausprobieren