Beispiel für die Verwendung von Javascript zum Ziehen und Tauschen von Div-Positionen
1 UmsetzungsprinzipDies geschieht mithilfe der Ereignisse dragstart/ondragover/ondrop des DOM-Elements. Das gezogene Element wird abgerufen, wenn das Ziehen beginnt, und dann wird das Ziehen zugelassen. Schließlich wird die Maus angehoben und an der neuen Position abgelegt. Hier wird die Methode event.preventDefault() verwendet. Viele Leute sind möglicherweise verwirrt. Hier ist eine kurze Einführung event.preventDefault(): Diese Methode verhindert, dass der Browser die mit dem Ereignis verknüpfte Standardaktion ausführt. Wir verwenden es im Dragover-Ereignis, da die mit Dragover verknüpfte Standardaktion darin besteht, zu verhindern, dass Daten oder Elemente in anderen Elementen platziert werden. Daher müssen wir das Standardereignis über event.preventDefault() verhindern, damit wir das Ziehen des Elements an eine neue Position zulassen können.
<!-- Ziehen Sie das Div, um die Reihenfolge zu ändern. Gilt für das Umschalten der Ebenenreihenfolge in GIS -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<Titel></Titel>
<style type="text/css">
Körper{
Anzeige: Flex;
Polsterung: 100px;
Flex-Richtung: Spalte;
}
div{
Breite: 100px;
Höhe: 100px;
Textausrichtung: zentriert;
}
</Stil>
</Kopf>
<Text>
<div style="Hintergrundfarbe: rot;Breite:200px;Höhe:200px;" draggable="true">Rot</div>
<div style="background-color: green;width:100px" draggable="true">Grün</div>
<div style="background-color: blue;" draggable="true">Blau</div>
</body>
<Skripttyp="text/javascript">
let div = document.getElementsByTagName("div");
lass Container = null;
// Dragstart-, Dragover- und Drop-Ereignisse durchlaufen und an jedes Div binden for(let i=0;i<div.length;i++){
div[i].ondragstart=Funktion(){
Container=dies
}
div[i].ondragover=Funktion(){
event.preventDefault();
}
div[i].ondrop=Funktion(){
Debugger;
wenn(Container!=null&&Container!=dies){
// Die konkrete Idee ist die gleiche wie beim Austausch von Variablenwerten let temp=document.createElement("div");
document.body.replaceChild(temp,this); //Verwende das neu erstellte Div, um die Zielposition einzunehmendocument.body.replaceChild(this,container); //Das Ziel-Div wird an der Startposition platziertdocument.body.replaceChild(container,temp) //Das Start-Div wird an der Zielposition platziertdebugger;
console.log('Geschäftslogik ausführen')
}
}
}
</Skript>
</html>
Dies ist das Ende dieses Artikels über das Implementierungsbeispiel zum Ziehen und Tauschen von Div-Positionen in JavaScript. Weitere relevante Inhalte zum Ziehen und Tauschen von Div-Positionen in JavaScript finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Detaillierte Erklärung, wie MySQL Phantom-Lesevorgänge löst
>>: Detaillierte Erläuterung der Nginx-Rewrite-Jump-Anwendungsszenarien
Artikel empfehlen
React+Antd implementiert ein Beispiel zum Hinzufügen, Löschen und Ändern von Tabellen
Inhaltsverzeichnis Tabelle/index.js Tabelle/Model...
HTML-Hyperlinks im Detail erklärt
Hyperlink Hyperlinks sind die am häufigsten verwen...
Lösung für das Problem des wiederholten Auftauchens des Nachrichten-Popup-Fensters von Element
Inhaltsverzeichnis 1. Verwendung 2. Lösen Sie das...
Analyse des Framework-Prinzips des Linux-Eingabesubsystems
Eingabe-Subsystem-Framework Das Linux-Eingabesubs...
Wie MySQL Milliarden von Datenverkehr unterstützt
Inhaltsverzeichnis 1 Master-Slave-Lese-/Schreibtr...
Implementierung langer Textschatten in Less in CSS3
Dieser Artikel stellt hauptsächlich die Implement...
Detaillierte Erklärung zur Verwendung des Grep-Befehls in Linux
1. Offizielle Einführung grep ist ein häufig verw...
Mehrere CSS3-Tag-Abkürzungen (empfohlen)
border-radius: CSS3 abgerundete Ecken Syntax: bor...
Implementierung der Nginx-Konfiguration https
Inhaltsverzeichnis 1: Bereiten Sie das https-Zert...
So implementieren Sie geplante Aufgaben der zweiten Ebene mit dem Linux Crontab Shell-Skript
1. Schreiben Sie das Shell-Skript crontab.sh #!/b...
Grundlagen der MySQL-Speicher-Engine
Im vorherigen Artikel haben wir über MySQL-Transa...
Drei gängige Stilselektoren in HTML-CSS
1: Tag-Selektor Der Tag-Selektor wird für alle Ta...
Tutorial zum Herunterladen und Installieren von MySQL 8.0.12 WinX64
MySQL 8.0.12 Download- und Installations-Tutorial...
So legen Sie die Anzahl der MySQL-Verbindungen fest und ermitteln sie
Holen Sie sich die Anzahl der Verbindungen --- Ho...
Mehr als 100 Zeilen Code zur Implementierung von React Drag Hooks
Vorwort Der Quellcode umfasst insgesamt nur mehr ...