HTML5-Ziehen und Loslassen

Ziehen Sie das CodeW3C.com Bild in das Rechteck.

Drag & Drop

Drag & 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 & 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 & Drop vollständig unterstützt.

API
Drag & Drop 4.0 9.0 3.5 6.0 12.0

HTML Drag & Drop Beispiel

Nachstehend ist ein einfaches Beispiel zur Drag & 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>

Versuchen Sie es selbst

Es mag etwas kompliziert aussehen, aber lassen Sie uns die verschiedenen Teile des Drag & 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 & 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 verschobenen 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 legt fest, wo verschobene 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-Attribut eine Funktion aufgerufen, drop(event):

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

Codeerklärung:

  • Aufruf von preventDefault(), um die Standardverarbeitung des Browsers der Daten zu verhindern (der Standardverhalten des drop-Ereignisses ist, die Daten als Link zu öffnen)
  • Daten werden durch die Methode dataTransfer.getData() erhalten. Diese Methode gibt zurück, welche Daten in setData() als gleichen Typ gesetzt wurden
  • Die verschobenen Daten sind die id des verschobenen Elements ("drag1")
  • Fügen Sie das verschobene Element dem Plattelement 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.

Versuchen Sie es selbst