Web-Frontend
H5-Tutorial
HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten
HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten
Der Inhalt dieses Artikels befasst sich mit der Implementierung der Drag-and-Drop-Funktion von HTML-Elementen in HTML5. Vor HTML5 musste man zum Implementieren von Drag & Drop js verwenden. Jetzt unterstützt HTML5 die Drag & Drop-Funktion intern, aber um etwas komplexere Funktionen zu implementieren, ist die Hilfe von js immer noch unverzichtbar. Schauen wir uns unten einige Beispiele an.
1. Erstellen Sie ein Drag-Objekt
Wir können dem Browser über das Draggable-Attribut mitteilen, welche Elemente die Drag-Funktion implementieren müssen. Draggable hat drei Werte: true: Das Element kann gezogen werden. False: Das Element kann nicht gezogen werden. Auto: Der Browser bestimmt, ob das Element gezogen werden kann.
Der Systemstandardwert ist auto, aber im automatischen Fall unterstützen Browser die Drag-and-Drop-Funktion verschiedener Elemente unterschiedlich. Beispielsweise werden img-Objekte unterstützt, div-Objekte jedoch nicht. Wenn Sie ein Element ziehen müssen, ist es daher am besten, Draggale auf „True“ zu setzen. Schauen wir uns unten ein Beispiel an:
float: left;
#target, #src > img 4px;
}
#target
{
width: 220px;
display: table; 🎜>#target > ; p
{
display: table-cell; 1px;
"true" id= "HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten" src="img/1.jpg" alt="HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten" />
target">
hier ablegen
<script> <br />var src = document.getElementById("src"); <br />var target = document.getElementById("target"); /html> <br /><br /><br />Operationseffekt: <br /> <br /><br /><br /> <br /><br />2. Umgang mit Drag-Ereignissen <br /> <br />Jetzt lernen wir etwas über Drag-Ereignisse. Es gibt zwei Arten von Ereignissen: das Ereignis des Drag-Objekts und das Ereignis des Drag-Objekts Drop-Area-Ereignis. Zu den Drag-Ereignissen gehören: Dragstart: Wird ausgelöst, wenn das Ziehen des Elements beginnt. Drag: Wird während des Ziehens des Elements ausgelöst. Dragend: Wird ausgelöst, wenn das Ziehen des Elements endet. Schauen wir uns unten ein Beispiel an: <br /><br /><br /><br /><br /><br />Kopieren Sie den Code<br /><br /><br />Der Code lautet wie folgt:<br /><br /> <br />< !DOCTYPE> <br /><head> 🎜>{ <br />float: left; <br />#target, #src > img 4px; <br />} <br />#target <br />{ <br />width: 220px; display: table; 🎜>#target > p <br />{ <br />display: table-cell; 1px; <p>} <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201301/2013010716232011.png" class="lazy" alt="" />img.dragged { <br />background-color: Orange <strong>} body> ><img src="/static/imghw/default1.png" data-src="img/2.jpg" class="lazy" draggable="true" id="HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten" alt="HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten" /> <br /><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201301/2013010716232012.png" class="lazy" draggable="true" id="car3" alt="car3" /> <br /><div id="target"> <br><p id="msg"> <div class="msgheader">hier ablegen <div class="right">< /div> <span style="max-width:90%" onclick="copycode(getid('phpcode133'));"><script> ); <u>var msg = document.getElementById("msg"); src.ondragstart = function (e) { e.target.classList.add("dragged"} src.ondragend = function (e) { e.target.classList.remove("dragged"); <div class="msgborder" id="phpcode133">msg.innerHTML = "drop here"; Funktion (e) { <br />msg.innerHTML = e.target.id;} <br /></script>
🎜>
Betriebseffekt:
3. Erstellen Sie einen Drop-Bereich
Sehen wir uns die Ereignisse im Zusammenhang mit dem Drop-Bereich an: Dragenter: Wird ausgelöst, wenn das Drag-Objekt in den Drop-Bereich gelangt. Dragover: Wird ausgelöst, wenn sich das Drag-Objekt darin bewegt der Drop-Bereich; Dragleave: Wird ausgelöst, wenn das Drag-Objekt nicht im Drop-Bereich platziert wird und den Drop-Bereich verlässt. Drop: Wird ausgelöst, wenn das Drag-Objekt im Drop-Bereich platziert wird.
Sehen wir uns ein Beispiel an:
Beispiel *
{
float: left; Rand: 4px;
#target
{
height: 123px;
text-align: center;
}
#target > p
{
display: table-cell; margin: 1px;
}
img.dragged
{
background-color: lightgrey
}
< ;img draggable="true" id="HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten" src="img/2.jpg" alt="HTML5-Anleitung-3. So implementieren Sie die Drag-and-Drop-Funktion von HTML-Elementen_HTML5-Tutorial-Fähigkeiten" />
;
<script> target") ) { <br />e.preventDefault(); <br />} <br />target.ondrop = function (e) { <br />var newElem = document.getElementById(draggedID).cloneNode(false); innerHTML = "" ; <br />target.appendChild(newElem); <br />e.preventDefault(); <br />} <br />src.ondragstart = function (e) { <br />draggedID = e.target.id ; <br /> e.target.classList.add("dragged"); <br />src.ondragend = function (e) { <br />var elems = document.querySelectorAll(".dragged"); 🎜>for ( var i = 0; i < elems.length; i ) { <br />elems[i].classList.remove("dragged"); <br />} <br /></ script> <br /></script>
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
1378
52
Führen Sie die PHP-Funktion mit onclick aus
Feb 29, 2024 pm 04:31 PM
Wir werden auch eine andere Möglichkeit zum Ausführen einer PHP-Funktion über das Ereignis onclick() mithilfe der Jquery-Bibliothek behandeln. Diese Methode ruft eine Javascript-Funktion auf, die den Inhalt der PHP-Funktion auf der Webseite ausgibt. Wir werden auch eine andere Möglichkeit demonstrieren, eine PHP-Funktion mithilfe des onclick()-Ereignisses auszuführen, indem wir die PHP-Funktion mit reinem JavaScript aufrufen. In diesem Artikel wird eine Möglichkeit vorgestellt, eine PHP-Funktion auszuführen, die GET-Methode zum Senden der Daten in der URL zu verwenden und die isset()-Funktion zum Überprüfen der GET-Daten zu verwenden. Diese Methode ruft eine PHP-Funktion auf, wenn die Daten festgelegt sind und die Funktion ausgeführt wird. Mit jQuery können wir eine PHP-Funktion über das Ereignis onclick() ausführen
So lesen Sie Excel-Daten in HTML
Mar 27, 2024 pm 05:11 PM
So lesen Sie Excel-Daten in HTML: 1. Verwenden Sie die JavaScript-Bibliothek, um Excel-Daten zu lesen. 2. Verwenden Sie die serverseitige Programmiersprache, um Excel-Daten zu lesen.
Der Unterschied zwischen appendChild und append in JS
Feb 20, 2024 pm 06:57 PM
Der Unterschied zwischen appendChild und append in JS erfordert spezifische Codebeispiele. Wenn wir in JavaScript untergeordnete Elemente dynamisch zum DOM (Document Object Model) hinzufügen müssen, verwenden wir normalerweise die Methoden appendChild und append. Obwohl ihr Zweck darin besteht, untergeordnete Elemente zu übergeordneten Elementen hinzuzufügen, gibt es einige Unterschiede in ihrer Verwendung. 1. appendChild-Methode Die appendChild-Methode ist eine der Methoden des DOM-Knotenobjekts
Was ist ein Dreamweaver-Zeilenumbruch?
Apr 08, 2024 pm 09:54 PM
Verwenden Sie das <br>-Tag in Dreamweaver, um Zeilenumbrüche zu erstellen, die über das Menü, Tastenkombinationen oder direkte Eingabe eingefügt werden können. Kann mit CSS-Stilen kombiniert werden, um leere Zeilen mit bestimmten Höhen zu erstellen. In manchen Fällen ist es sinnvoller, das <p>-Tag anstelle des <br>-Tags zu verwenden, da es automatisch Leerzeilen zwischen Absätzen erstellt und Stilkontrolle anwendet.
Verwenden Sie CSS Transform, um Elemente zu transformieren
Feb 24, 2024 am 10:09 AM
Verwendung von Transform in CSS Die Transform-Eigenschaft von CSS ist ein sehr leistungsfähiges Werkzeug, das Vorgänge wie Übersetzung, Drehung, Skalierung und Neigung von HTML-Elementen ausführen kann. Es kann das Erscheinungsbild von Elementen dramatisch verändern und Webseiten kreativer und dynamischer machen. In diesem Artikel stellen wir die verschiedenen Verwendungsmöglichkeiten von Transform im Detail vor und stellen spezifische Codebeispiele bereit. 1. Übersetzen (Übersetzen) Unter Übersetzen versteht man das Verschieben eines Elements um eine bestimmte Distanz entlang der x- und y-Achse. Die Syntax lautet wie folgt: tran
jQuery implementiert eine einfache Methode, um festzustellen, ob es untergeordnete Elemente innerhalb eines Elements gibt
Feb 28, 2024 pm 03:21 PM
jQuery ist eine weit verbreitete JavaScript-Bibliothek, die viele praktische Methoden zum Bearbeiten von HTML-Elementen bietet. Bei der Entwicklung von Webseiten stoßen wir häufig auf Situationen, in denen wir feststellen müssen, ob ein Element Unterelemente enthält. In diesem Artikel stellen wir vor, wie Sie jQuery zum Erreichen dieser Funktion verwenden, und stellen spezifische Codebeispiele bereit. Um festzustellen, ob es untergeordnete Elemente innerhalb eines Elements gibt, können wir die Methode children() von jQuery verwenden. Die Methode children() wird verwendet, um Übereinstimmungen zu erhalten
Was bedeutet Ridge in CSS?
Apr 28, 2024 pm 04:06 PM
Ridge ist ein Rahmenstil in CSS, der zum Erstellen eines 3D-Rands mit einem Reliefeffekt verwendet wird, der sich als erhabene, kammartige Linie manifestiert.
So verwenden Sie Hover in CSS
Feb 23, 2024 pm 12:06 PM
Die Hover-Pseudoklasse in CSS ist ein sehr häufig verwendeter Selektor, der es uns ermöglicht, den Stil eines Elements zu ändern, wenn die Maus darüber fährt. In diesem Artikel wird die Verwendung von Hover vorgestellt und spezifische Codebeispiele bereitgestellt. 1. Grundlegende Verwendung Um Hover zu verwenden, müssen wir zunächst einen Stil für das Element definieren und dann die Pseudoklasse :hover verwenden, um den entsprechenden Stil anzugeben, wenn die Maus darüber schwebt. Zum Beispiel haben wir ein Schaltflächenelement. Wenn die Maus über die Schaltfläche fährt, soll sich die Hintergrundfarbe der Schaltfläche in Rot und die Textfarbe in Weiß ändern.
