HTML5 ist mittlerweile so beliebt, lernen wir diese neuen Elemente kennen. In diesem Artikel erfahren Sie hauptsächlich, was HTML5-Drag-and-Drop-Elemente sind und wie Sie sie verwenden.
Was bedeutet Drag & Drop in HTML5?
Drag-and-Drop ist eine gängige Funktion, bei der Sie ein Objekt greifen und es später an eine andere Stelle ziehen. Der Zweck von Drag & Drop besteht darin, dass Sie ein Objekt an der gewünschten Stelle platzieren können. In HTML5 gehört Drag & Drop zum Standard und jedes Element kann per Drag & Drop verschoben werden.
Was bedeutet Drag & Drop?
darg: Der Ereigniskörper ist das gezogene Element und wird ausgelöst, wenn das gezogene Element gezogen wird.
drop: Der Ereignistext ist das Zielelement und wird ausgelöst, wenn das Zielelement das per Drag & Drop gezogene Element vollständig akzeptiert.
Browser-Unterstützung
Internet Explorer Firefox Opera Google Chrome Safari
Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Ziehen.
Hinweis: Safari 5.1.2 unterstützt kein Ziehen.
HTML5-Drag-and-Drop-Verwendungsbeispiel
Das folgende Beispiel ist ein einfaches Drag-and-Drop Beispiel:
Hier ist ein 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 sieht vielleicht etwas kompliziert aus, aber wir können verschiedene Teile des Drag-and-Drop-Ereignisses separat untersuchen.
Detaillierte Schritte zur Drag-and-Drop-Ereignisausführung:
1. Stellen Sie das Element so ein, dass es ziehbar ist.
Zuerst in Um das Element ziehbar zu machen, setzen Sie das Draggable-Attribut auf true:
<img draggable="true">
Was gezogen werden soll – ondragstart und setData()
Anschließend geben Sie an, was passieren soll, wenn das Element gezogen wird.
Im obigen Beispiel ruft das Attribut ondragstart eine Funktion, Drag(event), auf, die die zu ziehenden Daten angibt. 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 Beispiel ist der Datentyp „Text“ und der Wert ist die ID des ziehbaren Objekts Element („drag1“).
Tipp: Weitere nützliche Informationen finden Sie im Abschnitt „Ondragstart-Event“ dieser Website!
2. Wohin mit dem Ondragover?
Das Ondragover-Ereignis gibt an, wo die gezogenen Daten platziert werden sollen.
Standardmäßig können Daten/Elemente nicht in anderen Elementen platziert werden. Wenn wir die Platzierung zulassen müssen, müssen wir die Standardbehandlung des Elements verhindern.
Dies geschieht durch den Aufruf der Methode event.preventDefault() des Ereignisses ondragover:
event.preventDefault()
3. Place - ondrop
Wenn die gezogenen Daten platziert werden, tritt das Drop-Ereignis ein.
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:
Rufen Sie PreventDefault() auf, um zu verhindern, dass der Browser das ändert Daten Die Standardverarbeitung (das Standardverhalten des Drop-Ereignisses besteht darin, als Link zu öffnen)
Rufen Sie die gezogenen Daten über die Methode dataTransfer.getData("Text") ab. Diese Methode gibt jeden Datensatz in den gleichen Typ wie in der setData()-Methode zurück.
Die gezogenen Daten sind die ID des gezogenen Elements („drag1“), und das gezogene Element wird an das platzierte Element (Zielelement) angehängt.
[Verwandte Empfehlungen]
Grundlegende Elemente von HTML, sodass Sie HTML von Grund auf lernen können
Die Entwicklung von HTML und HTML5-Verlauf
Das obige ist der detaillierte Inhalt vonHTML5 Drag and Drop: Was bedeutet Drag and Drop? Wie benutzt man es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
