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
Detaillierte Erklärung der Kapselung und Verwendung der Vue-Bildvergrößerungskomponente
Basierend auf dem Vue-Bildvergrößerungskomponente...
my.cnf (my.ini) wichtige Parameteroptimierungs-Konfigurationsanweisungen
MyISAM-Speicher-Engine Die MyISAM-Speicher-Engine...
Zusammenfassung der Probleme bei der Installation und Verwendung des MySQL 5.7.19 Winx64 ZIP-Archivs
Heute habe ich gelernt, MySQL zu installieren. Da...
JavaScript zum Erzielen eines einfachen Karusselleffekts
Was ist ein Karussell? Karussell: In einem Modul ...
Detailliertes Verständnis von umask in den neuen Linux-Dateiberechtigungseinstellungen
Vorwort Der Ursprung ist Frage 1: Wenn Ihre Umask...
Berechnete Eigenschaften und Listenerdetails
Inhaltsverzeichnis 1. Berechnete Eigenschaften 1....
Detaillierte Erläuterung der häufig verwendeten Filter von Tomcat
Inhaltsverzeichnis 1. Domänenübergreifender Filte...
Native JS realisiert einheitliche Bewegungen verschiedener Sportarten
In diesem Artikel wird eine einheitliche Bewegung...
Das Laufschrift-Tag in HTML erzielt einen nahtlosen Laufschrift-Effekt
Das <marquee>-Tag ist ein Tag, das paarweis...
Drei Vererbungsmethoden in JavaScript
erben 1. Was ist Vererbung? Vererbung: Zunächst e...
So ändern Sie das ROOT-Passwort in MySql8.0 und höheren Versionen richtig
Bereitstellungsumgebung: Installationsversion Red...
Ubuntu startet den Remote-Anmeldevorgang des SSH-Dienstes
SSH-Secure-Shell, ermöglicht sichere Remote-Anmel...
Docker verwendet Root, um in den Container zu gelangen
Führen Sie zuerst den Docker-Container aus Führen...
Detaillierte Erklärung zur Verwendung von nohup /dev/null 2>&1
Befehl „nohup“: Wenn Sie einen Prozess ausführen ...
MySQL-Zeitdifferenzfunktionen (TIMESTAMPDIFF, DATEDIFF), Funktionen zur Berechnung von Datumsumrechnungen (date_add, day, date_format, str_to_date)
1. Zeitdifferenzfunktionen (TIMESTAMPDIFF, DATEDI...