JS implementiert die Drag- und Platzhalterfunktionen von Elementen

In diesem Blogbeitrag geht es um eine Schwierigkeit, die bei einem Projekt aufgetreten ist, an dem der Blogger erst vor ein paar Tagen gearbeitet hat. Nachdem Sie dies gelernt haben, können Sie Seitenelemente problemlos verschieben. In Kombination mit einigen Bedingungen können Sie eine Seite mit dem Fortschritt der Aufgabenerledigung erstellen!

Schauen wir uns zunächst die Wirkung an:

Funktionalität:

Ziehen Sie ein Element von einem Abschnitt an eine bestimmte Position in einem anderen Abschnitt . Der Blogger hat dies nach seinen eigenen Bedürfnissen gemacht. Das angeklickte Element kann nur in das nächste Modul des Moduls verschoben werden, in dem es sich befindet. Wenn es in ein anderes Modul verschoben wird, kehrt es an die ursprüngliche Position zurück. Und wenn die Position des von Ihnen gezogenen Elements eine bestimmte Distanz nicht überschreitet, springt es automatisch an die ursprüngliche Position zurück

Fallstudie:

Der entscheidende Schritt ist dieser! Wenn Sie die Maus drücken, wird nicht nur das aktuelle Element, sondern auch das aktuelle Modul abgerufen (daher muss zu Beginn für jedes Modul ein Indexattribut festgelegt werden, und der Attributwert ist die Indexnummer jedes Moduls selbst). In diesem Schritt wird bestimmt, ob das zu verschiebende Modul das nächste Modul des aktuellen Moduls ist, wenn die Maus losgelassen wird (dies kann etwas verwirrend sein, lesen Sie es sorgfältig durch). Wenn die Bedingung erfüllt ist, muss begonnen werden, die Position nacheinander mit den Elementen im Modul zu vergleichen, zu denen verschoben werden soll (hier wird die spezifische Position bestimmt, an die das Element verschoben werden soll). Nach der Bestätigung muss an der spezifischen Position ein neues leeres Element erstellt werden, und der Inhalt des verschobenen Elements muss diesem leeren Element hinzugefügt werden. Dies ist der letzte Schritt! Vergessen Sie nicht, das Originalelement zu entfernen.

Code-Präsentation:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <script src="./js/jQuery.min.js"></script>
    <Stil>
        * {
            Rand: 0;
            links: 0;
            Listenstil: keiner;
            Box-Größe: Rahmenbox;
        }
        .container {
            Anzeige: Flex;
            Inhalt ausrichten: Abstand herum;
            Breite: 1000px;
            Höhe: 600px;
            Rand: 100px automatisch;
            Polsterung: 0;
        }
        .container li {
            Breite: 180px;
            Höhe: 100%;
            Hintergrundfarbe: Pflaume;
            Rahmenradius: 10px;
            Polsterung: 5px;
        }
        .Artikel {
            Breite: 170px;
            Höhe: 100px;
            Hintergrundfarbe: lachs;
            Rand: 5px 0;
            Rahmenradius: 10px;
            Cursor: Zeiger;
        }
    </Stil>
</Kopf>
<Text>
    <ul Klasse="Behälter">
       <li>
           <div Klasse="Artikel">1</div>
           <div Klasse="Artikel">2</div>
           <div Klasse="Artikel">3</div>
       </li> 
       <li>
        <div Klasse="Artikel">4</div>
        <div Klasse="Artikel">5</div>
        <div Klasse="Artikel">6</div>
       </li> 
       <li>
        <div Klasse="Artikel">7</div>
        <div Klasse="Artikel">8</div>
        <div Klasse="Artikel">9</div>
       </li> 
       <li></li>
       <li></li>
    </ul>
    <Skript>
        $(Funktion(){
            für (var i = 0; i < 5; i++) {
               $(".container li")[i].setAttribute('index', i);
            }
            $('.item').auf('mousedown',Funktion(e){
                var index = Zahl($(this).parent()[0].getAttribute('index'));
                //Linken und oberen Rand der aktuell ausgewählten Aufgabe abrufen startLeft = $(this).offset().left;
                startTop = $(this).offset().top;
                //Position der Maus in der ausgewählten Aufgabe suchen mouseX = e.pageX - startLeft;
                mouseY = e.pageY - startTop;
                $(diese).auf('Mausbewegung',Funktion(e){
                    $(dieser).offset({
                       links: e.pageX - mouseX,
                       oben: e.pageY - mouseY        
                    })
                })
                $(diese).auf('mouseup',Funktion(){
                    //Wird verwendet, um die Position aufzuzeichnen, an die sich das Element bewegt k = -1;
                    $(this).aus('Mausbewegung');
                     //Holen Sie sich den nächsten Modulindex des ausgewählten Moduls if (index >= 4) {
                        Index = 3;
                    }
                    var nächster = $('.container li').eq(index + 1);
                     
                    //Wenn die zurückgelegte Distanz beim Loslassen der Maus genau im Bereich des nächsten Moduls des ausgewählten Moduls liegt, führen Sie if ($(this).offset().left >= next.offset().left&&$(this).offset().left <= next.offset().left + next[0].offsetWidth) { aus.
                   //Inhalt des ausgewählten Elements abrufen var text = $(this).html();
                   //Erstellen Sie am endgültigen Speicherort eine leere Aufgabe und fügen Sie dann den erworbenen Inhalt hinzu. var father = document.createElement('div');
                   Vater.Klassenname = "Artikel";
                   $(Vater).anhängen(Text);
                  //Das aktuell angeklickte Element abrufen var ele = $(this);
                 //Wenn das aktuelle Modul kein Element hat, füge es direkt an der ersten Position hinzu. Wenn ja, vergleiche sein oberes Element mit dem größeren und platziere es dahinter if (next.children().length == 0) {
                    weiter.anhängen(Vater);
                } anders {
                   $.each(nächstes.Kinder(), Funktion (i,Element) {
                    wenn (ele.offset().top > $(item).offset().top) {
                        k = i;
                    }
                   })
                    //Wenn k == -1, bedeutet dies, dass die Aufgabe an die erste Position des Moduls gesetzt werden soll, wenn (k == -1) {
                        nächste.Kinder().eq(0).vor(Vater);
                    } anders {
                        nächste.Kinder().eq(k).nach(Vater);
                 }
                    
                }
                //Lösen Sie das Verschiebungsereignis und löschen Sie das Element am ursprünglichen Speicherort.
                $(this).off("Mausbewegung");
                $(diese).entfernen();
                $(dies).leer();
            } anders {
                //Hier ist die Bewegung fehlgeschlagen und zur ursprünglichen Position zurückgekehrt $(this).offset({
                    links: startLeft,
                    nach oben: startTop
                })
                $(this).off("Mausbewegung");
            }
                })
            })
        })
    </Skript>
</body>
</html>

Erweiterungen:

In diesem Fall können in Kombination mit Hintergrunddaten die Anzeige und der Drag-Effekt mehrerer Aufgaben mit unterschiedlichem Fortschritt realisiert werden, wie in der folgenden Abbildung dargestellt:

Schnell aufrollen~

Dies ist das Ende dieses Artikels über die JS-Implementierung von Element-Dragging- und Platzhalterfunktionen. Weitere relevante Inhalte zu JS-Element-Dragging- und Platzhalterfunktionen 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:

JavaScript macht DOM-Elemente ziehbar
JavaScript implementiert das Ziehen von Elementen zum Vertauschen von Positionen
JavaScript implementiert Beispielcode für das Ziehen von Elementen mit der Maus

<<: Implementierung des Aufbaus eines Kubernetes-Clusters mit VirtualBox+Ubuntu16

>>: HTML-Tutorial: So ändern Sie Bildgröße, Ausrichtung, Abstand und Rahmenattribute

Detaillierte Erklärung des Prinzips und der Funktion des Vue-Listen-Rendering-Schlüssels

JS implementiert die Drag- und Platzhalterfunktionen von Elementen

Funktionalität:

Fallstudie:

Erweiterungen:

Detaillierte Erklärung des Prinzips und der Funktion des Vue-Listen-Rendering-Schlüssels

So erstellen Sie einen vollständigen Samba-Server unter Linux (CentOS-Version)

Tabelle zeigt den Grenzcode, den Sie anzeigen möchten

Über 3 gängige Pakete der REM-Anpassung

Warum sollte die Anzahl der Zeilen in einer einzelnen MySQL-Tabelle 5 Millionen nicht überschreiten?

JavaScript-Entwurfsmuster, Lernadaptermuster

Detaillierte Erläuterung von vier Lösungen zur Implementierung von Inline-Scrolling auf Mobilgeräten

So stellen Sie Tomcat stapelweise mit Ansible bereit

Detaillierter Installationsprozess und Konfiguration von mysql5.7.19 zip

Detailliertes Beispiel für eine Remote-Verbindung zu Docker mithilfe einer TLS-verschlüsselten Kommunikation

Artikel empfehlen

So leiten Sie eine PC-Adresse in Vue an eine Mobiladresse um

Diskussion zu Bildpfadproblemen in CSS (dasselbe Paket/anderes Paket)

Verwendung von Vue-Filtern und benutzerdefinierten Anweisungen

Docker-Konfiguration Alibaba Cloud Container Service-Betrieb

So verbinden Sie SpringBoot mit MySQL, um Daten abzurufen und in die Backend-Schnittstelle zu schreiben

Eine kurze Diskussion über MySQL-Ereignisplanungsaufgaben

Detaillierte Erläuterung der Bereitstellung und grundlegenden Verwendung von Docker Compose

Erste Schritte Tutorial für Anfänger⑧: Einfaches Erstellen einer Artikel-Site

Sequentielles und zufälliges Schreiben auf Linux-Festplatten

Erläuterung der Linux-Kernel-Optimierungskonfiguration für hochparallele Nginx-Server

MySQL-Methode und Beispiel für langsame Abfragen

Detaillierte Erläuterung mehrerer Möglichkeiten zum Schreiben privater Variablen der ES6-Implementierungsklasse

So implementieren Sie eine Remote-Verbindung für Redis unter Linux

Implementierung der vertikalen Zentrierung mit unbekannter Höhe in CSS

js, um den Effekt des Ziehens des Schiebereglers zu erzielen