Hallo Frontend-Programmierer, hallo! Ich freue mich sehr, Ihnen eine Reihe von HTML5-Tutorials zu erläutern. In diesem Artikel werden hauptsächlich HTML5-Drag-and-Drop-Ereignisse vorgestellt. Drag-and-Drop ist eine häufige Funktion von HTML5.
Drag and Drop sind Teil des HTML5-Standards.
Drag and Drop
Drag and Drop ist eine häufige Funktion, bei der Sie ein Objekt greifen und es später an eine andere Stelle ziehen.
In HTML5 gehört Drag & Drop zum Standard und jedes Element kann per Drag & Drop verschoben werden.
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera 12, Chrome und Safari 5 unterstützen Drag & Drop.
Hinweis: Drag & Drop wird in Safari 5.1.2 nicht unterstützt.
HTML5-Drag-and-Drop-Beispiel
Das folgende Beispiel ist ein einfaches Drag-and-Drop-Beispiel:
Der Code lautet wie folgt:
<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
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>It mag etwas komplex aussehen, aber wir können verschiedene Teile des Drag-and-Drop-Ereignisses separat untersuchen.
Legen Sie das Element als ziehbar fest
Um das Element ziehbar zu machen, setzen Sie zunächst das Attribut „draggable“ auf „true“:
<img draggable=”true” />
Was gezogen werden soll – ondragstart und setData ()
Geben Sie dann an, was passiert, 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 gilt für die ziehbaren Daten Element-ID(“drag1″).
Wo platziert werden – 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 Aufrufen der event.preventDefault()-Methode des ondragover-Ereignisses:
event.preventDefault()
für die Platzierung – ondrop
Wenn die gezogenen Daten platziert werden , wird das Drop-Ereignis eintreten.
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));
}Codeerklärung:
Rufen Sie präventDefault() auf, um die Browser-Standardeinstellung zu vermeiden Umgang mit Daten (Standardverhalten für Drop-Ereignisse ist das Öffnen als Link).
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″).
Fügen Sie das gezogene Element an das platzierte Element (Zielelement) an.
Das Obige ist der Inhalt des HTML5-Tutorials per Drag & Drop. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!
