HTML5 Drag and Drop: Was bedeutet Drag and Drop? Wie benutzt man es?
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!
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
1377
52
So führen Sie das H5 -Projekt aus
Apr 06, 2025 pm 12:21 PM
Ausführen des H5 -Projekts erfordert die folgenden Schritte: Installation der erforderlichen Tools wie Webserver, Node.js, Entwicklungstools usw. Erstellen Sie eine Entwicklungsumgebung, erstellen Sie Projektordner, initialisieren Sie Projekte und schreiben Sie Code. Starten Sie den Entwicklungsserver und führen Sie den Befehl mit der Befehlszeile aus. Vorschau des Projekts in Ihrem Browser und geben Sie die Entwicklungsserver -URL ein. Veröffentlichen Sie Projekte, optimieren Sie Code, stellen Sie Projekte bereit und richten Sie die Webserverkonfiguration ein.
Was genau bedeutet H5 -Seitenproduktion?
Apr 06, 2025 am 07:18 AM
Die Produktion von H5-Seiten bezieht sich auf die Erstellung von plattformübergreifenden kompatiblen Webseiten unter Verwendung von Technologien wie HTML5, CSS3 und JavaScript. Sein Kern liegt im Parsingcode des Browsers, der Struktur-, Stil- und interaktive Funktionen macht. Zu den allgemeinen Technologien gehören Animationseffekte, reaktionsschnelles Design und Dateninteraktion. Um Fehler zu vermeiden, sollten Entwickler debuggen werden. Leistungsoptimierung und Best Practices umfassen Bildformatoptimierung, Anforderungsreduzierung und Codespezifikationen usw., um die Ladegeschwindigkeit und die Codequalität zu verbessern.
Wie verwende ich Ansichtsfenster -Meta -Tags, um die Seite zu steuern, die auf mobilen Geräten skaliert wird?
Mar 13, 2025 pm 08:00 PM
In dem Artikel werden die Meta-Tags mit Ansichtsfenster besprochen, um die Seite zu steuern, die auf mobilen Geräten skaliert und sich auf Einstellungen wie Breite und initiale Maßstäbe für optimale Reaktionsfähigkeit und Leistung konzentriert.Character Count: 159
Wie benutze ich die API der HTML5 -Seite Sichtbarkeit, um zu erkennen, wann eine Seite sichtbar ist?
Mar 13, 2025 pm 07:51 PM
In dem Artikel werden die Sichtbarkeits -API der HTML5 -Seite mit der Sichtbarkeit von Seiten ermittelt, die Benutzererfahrung verbessert und die Ressourcennutzung optimiert. Zu den wichtigsten Aspekten gehören die Pause, die Verringerung der CPU -Last und die Verwaltung von Analysen auf der Grundlage von Sichtbarkeitsänderungen.
Wie gehe ich mit der Privatsphäre und Berechtigungen des Benutzer Ort mit der Geolocation -API um?
Mar 18, 2025 pm 02:16 PM
In dem Artikel wird die Verwaltung der Privatsphäre und Berechtigungen des Benutzerstandorts mithilfe der Geolocation -API erörtert, wobei die Best Practices für die Anforderung von Berechtigungen, die Gewährleistung der Datensicherheit und die Einhaltung der Datenschutzgesetze hervorgehoben werden.
Wie verwende ich die HTML5 -Drag & Drop -API für interaktive Benutzeroberflächen?
Mar 18, 2025 pm 02:17 PM
In dem Artikel wird erläutert, wie die HTML5 -Drag & Drop -API verwendet wird, um interaktive Benutzeroberflächen zu erstellen, Schritte zu detaillieren, um Elemente draggierbar zu machen, Schlüsselereignisse zu verarbeiten und Benutzererfahrung mit benutzerdefiniertem Feedback zu verbessern. Es wird auch gemeinsame Fallstricke zu a diskutiert
Bedarf die Produktion von H5 -Seiten eine kontinuierliche Wartung?
Apr 05, 2025 pm 11:27 PM
Die H5 -Seite muss aufgrund von Faktoren wie Code -Schwachstellen, Browserkompatibilität, Leistungsoptimierung, Sicherheitsaktualisierungen und Verbesserungen der Benutzererfahrung kontinuierlich aufrechterhalten werden. Zu den effektiven Wartungsmethoden gehören das Erstellen eines vollständigen Testsystems, die Verwendung von Versionstools für Versionskontrolle, die regelmäßige Überwachung der Seitenleistung, das Sammeln von Benutzern und die Formulierung von Wartungsplänen.
Welche Anwendungsszenarien eignen sich für die H5 -Seitenproduktion
Apr 05, 2025 pm 11:36 PM
H5 (HTML5) eignet sich für leichte Anwendungen wie Marketingkampagnen, Produktdisplayseiten und Micro-Websites für Unternehmenswerbung. Seine Vorteile liegen in plattformartigen und reichhaltigen Interaktivität, aber seine Einschränkungen liegen in komplexen Interaktionen und Animationen, lokalen Ressourcenzugriff und Offline-Funktionen.
