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
So zeigen Sie den Status von Remote-Serverdateien in Linux an
Wie unten dargestellt: Der Testbefehl stellt fest...
56 praktische JavaScript-Toolfunktionen zur Verbesserung der Entwicklungseffizienz
Inhaltsverzeichnis 1. Digitaler Betrieb (1) Gener...
Beispiel für die Implementierung einer nahtlosen Endlosschleife im Hintergrund mithilfe einer CSS-Animation
1. Nachfrage Ein Bild bewegt sich in einer Endlos...
So installieren Sie mehrere mysql5.7.19 (tar.gz)-Dateien unter Linux
Informationen zur ersten Installation der MySQL-5...
So richten Sie den Start einer JAR-Anwendung unter CentOS7 ein
Fallstricke bei der Projektimplementierung Beim B...
So verwenden Sie den Yum-Befehl
1. Einführung in yum Yum (vollständiger Name Yell...
Implementierung von Zugriffskontrolle und Verbindungsbeschränkung basierend auf Nginx
Vorwort Das integrierte Modul von Nginx unterstüt...
Detaillierte Erklärung der Verwendung von JSON.parse und JSON.stringify
Inhaltsverzeichnis JSON.parse JSON.parse-Syntax R...
Analysieren Sie die Dauer von TIME_WAIT aus dem Linux-Quellcode
Inhaltsverzeichnis 1. Einleitung 2. Lassen Sie un...
So fügen Sie eindeutige Indizes für Felder in MySQL hinzu und löschen sie
1. PRIMARY KEY hinzufügen (Primärschlüsselindex) ...
Eine Liste der Fallstricke beim regulären JS-Matching
Ich habe vor Kurzem eine Falle bei der regulären ...
Verwenden Sie IISMonitor, um Webseiten zu überwachen und IIS automatisch neu zu starten
Inhaltsverzeichnis 1. Tool-Einführung 2. Arbeitsa...
Detaillierte Erläuterung der Methode zur Bestimmung des einzelnen Masterknotens von MySQL 5.7 MGR
Der MGR unserer Bank wird Ende des Jahres eingefü...
React implementiert doppelten Schieberegler zum Querschieben
In diesem Artikel wird der spezifische Code für R...
Detaillierte Erläuterung des Prozesses zum Bereitstellen des verteilten Konfigurationscenters Apollo mit einem Klick mithilfe von Docker Compose
Einführung Wenn wir über Verteilung sprechen, müs...