HTML5-Drag-and-Drop-Lernen und vollständiger Beispielcode
In diesem Artikel erfahren Sie, wie Sie HTML5 per Drag-and-Drop verschieben und den Beispielcode vervollständigen. Ich hoffe, dass er für H5-Anfänger hilfreich ist!
1) Erstellen Sie das Quellprojekt
1.1) Der Wert des ziehbaren Attributs:
true - dieses Element kann gezogen werden;
false – dieses Element kann nicht gezogen werden;
auto – der Browser kann selbstständig entscheiden, ob es möglich ist gezogen werden;
1.2) Ereignisse von gezogenen Elementen:
Dragstart – wird ausgelöst, wenn das Element gezogen wird ;
Ziehen – wird wiederholt ausgelöst, wenn das Element gezogen wird.
Dragend – wird ausgelöst, wenn der Ziehvorgang abgeschlossen ist
2) Erstellen Sie einen Freigabebereich
2.1) Release-Bereich-Ereignis:
Dragenter – wird ausgelöst, wenn das gezogene Element in den vom Release-Bereich eingenommenen Bildschirmbereich gelangt;
Dragover ——Wird ausgelöst, wenn sich das gezogene Element innerhalb des Freigabebereichs bewegt;
Dragleave——Wird ausgelöst, wenn das gezogene Element den Freigabebereich verlässt, ohne platziert zu werden; Drop – Wird ausgelöst, wenn das gezogene Element im Freigabebereich abgelegt wird.
3) Verwenden Sie das DataTransfer-Objekt
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#src > * {float:left;}
#src > img {border: thin solid black; padding: 2px; margin:4px;}
#target {border: thin solid black; margin:4px;}
#target { height: 81px; width: 81px; text-align: center; display: table;}
#target > p {display: table-cell; vertical-align: middle;}
img.dragged {background-color: lightgrey;}
</style>
</head>
<body>
<p id="src">
<img draggable="true" id="banana" src="banana100.png" alt="banana"/>
<img draggable="true" id="apple" src="apple100.png" alt="apple"/>
<img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
<p id="target">
<p id="msg">Drop Here</p>
</p>
</p>
<script>
var src = document.getElementById("src");
var target = document.getElementById("target");
var msg = document.getElementById("msg");
var draggedID;
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function(e) {
var newElem = document.getElementById(draggedID).cloneNode(false);
target.innerHTML = "";
target.appendChild(newElem);
e.preventDefault();
}
src.ondragstart = function(e) {
draggedID = e.target.id;
e.target.classList.add("dragged");
}
src.ondragend = function(e) {
var elems = document.querySelectorAll(".dragged");
for (var i = 0; i < elems.length; i++) {
elems[i].classList.remove("dragged");
}
}
</script>
</body>
</html>3.1) Gleichzeitig mit dem Ereignis, das durch ausgelöst wird Der Drag-and-Drop-Vorgang Das versendete Objekt ist DragEvent, das von MouseEvent abgeleitet ist.
Zusätzliche Attribute, die durch das DragEvent-Objekt definiert werden:
dataTransfer – Gibt ein Objekt zurück, das für die Datenübertragung in den Freigabebereich (DataTransfer) verwendet wird; 🎜 >
3.2)Durch das DataTransfer-Objekt definierte Attribute:
Typen – das Format der zurückgegebenen Daten.
getData(
setData(
clearData(
Dateien – Gibt die Liste der gezogenen Dateien zurück.
3.3) Drag-and-Drop-Dateien:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#src > * {float:left;}
#src > img {border: thin solid black; padding: 2px; margin:4px;}
#target {border: thin solid black; margin:4px;}
#target { height: 81px; width: 81px; text-align: center; display: table;}
#target > p {display: table-cell; vertical-align: middle;}
img.dragged {background-color: lightgrey;}
</style>
</head>
<body>
<p id="src">
<img draggable="true" id="banana" src="banana100.png" alt="banana"/>
<img draggable="true" id="apple" src="apple100.png" alt="apple"/>
<img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
<p id="target">
<p id="msg">Drop Here</p>
</p>
</p>
<script>
var src = document.getElementById("src");
var target = document.getElementById("target");
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function(e) {
var droppedID = e.dataTransfer.getData("Text");
var newElem = document.getElementById(droppedID).cloneNode(false);
target.innerHTML = "";
target.appendChild(newElem);
e.preventDefault();
}
src.ondragstart = function(e) {
e.dataTransfer.setData("Text", e.target.id);
e.target.classList.add("dragged");
}
src.ondragend = function(e) {
var elems = document.querySelectorAll(".dragged");
for (var i = 0; i < elems.length; i++) {
elems[i].classList.remove("dragged");
}
}
</script>
</body>
</html>Name – Rufen Sie den Dateinamen ab.
Typ – Rufen Sie den Dateityp ab. Dargestellt durch MIME-Typ;
Größe – Holen Sie sich die Dateigröße (in Bytes); 🎜>Empfohlene HTML5-Kurse: PHP-Website für ChinesischHTML5-Video-Online-Tutorial
Das obige ist der detaillierte Inhalt vonHTML5-Drag-and-Drop-Lernen und vollständiger Beispielcode. 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
1379
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.
