So erzielen Sie mit H5 einen Drag-and-Drop-Effekt
Dieses Mal zeige ich Ihnen, wie Sie H5 verwenden, um den Drag-and-Drop-Effekt zu erzielen, und welche Vorsichtsmaßnahmen für die Verwendung von H5 gelten, um den Drag-and-Drop-Effekt zu erzielen Ein praktischer Fall, werfen wir einen Blick darauf.
Drag & Drop
Drag & Drop ist eine gängige 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.
Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Ziehen.
Hinweis:Safari 5.1.2 unterstützt kein Ziehen.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>拖放</title>
<style type="text/css">
#p1{width:360px;height:220px;padding:20px;border:1px solid black;}
</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 id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<br />
<img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)" width="300px" height="180px" />
</body>
</html>Zuallererst: Um „Das Element kann gezogen werden“ zu verwenden, setzen Sie das dragable-Attribut auf „true“:
Dann geben Sie an, wann was passiert, wenn ein Element gezogen wird.
Im obigen Beispiel ruft das ondragstart-Attribut eine Funktion, Drag(event), auf, die die zu ziehenden Daten angibt. Die
dataTransfer.setData()-Methode legt den Datentyp und den Wert der gezogenen Daten fest:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}in diesem Beispiel , der Datentyp ist „Text“ und der Wert ist die ID des ziehbaren Elements („drag1“).
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 event.preventDefault()-Methode des ondragover-Ereignisses : event.preventDefault ()
Wenn die gezogenen Daten platziert werden, 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));
}Codeerklärung:
Rufen Sie preventDefault() auf, um die Standardverarbeitung von Daten durch den Browser zu verhindern (das Standardverhalten des Drop-Ereignisses besteht darin, als Link zu öffnen)
über dataTransfer . Die getData("Text")-Methode ruft die gezogenen Daten 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")
Das gezogene Element an das Platzierungselement (Zielelement) anhängen
Vor und zurück ziehen:
Wenn Sie zwischen zwei Stellen hin und her ziehen möchten, ändern Sie einfach den obigen Code leicht.
Ändern Sie den Code im Textkörper in:
<body> <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)" width="300px" height="180px" /></p> <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p> </body>
Dann im Stil Just Fügen Sie #p2 in der Mitte hinzu:
<style type="text/css">
#p1,#p2{width:360px;height:220px;padding:20px;border:1px solid black;}
</style>Auf diese Weise können Sie per Drag & Drop hin und her ziehen.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.
Empfohlene Lektüre:
Ausführliche Erläuterung der Verwendung von Paging-Abfragen
Die Beziehung zwischen Zeichen und mathematischen Funktionen
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit H5 einen Drag-and-Drop-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
