JavaScript implementiert den Div-Maus-Drag-Effekt

In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung des Div-Maus-Drag-Effekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Implementierungsprinzip: Wenn die Maus gedrückt wird, wird die Mauskoordinatenposition dynamisch gemäß dem Ereignis onmousemove abgerufen, um die Position des Div zu aktualisieren. Die Implementierungsvoraussetzung ist, dass das Div einen Positionierungseffekt haben muss, da es sonst nicht verschoben werden kann.

HTML

<div Klasse="Box"></div>

CSS-Stile

.Kasten {
    Position: absolut;
    Breite: 200px;
    Höhe: 200px;
    Hintergrund: rot;    
    }

Lassen Sie uns zunächst die Anforderungen analysieren. Diese Anforderung besteht darin, dass Sie das Div nur verschieben und seine Position auf der Seite ändern können, wenn beim Klicken die Maus gedrückt wird. Wenn Sie die Maus loslassen, können Sie sie nicht mehr bewegen. Es gibt hier also drei Zustände der Maus, nämlich wenn die Maus gedrückt wird (Mousedown-Event), wenn sie bewegt wird (Mousemove-Event) und wenn sie losgelassen wird (Mouseup-Event).

Es gibt also drei Ereignisse im js-Teil.

JS-Teil

var box = document.getElementsByClassName("box")[0]; //Element abrufen var x, y; //Koordinaten von div speichern var isDrop = false; //Bewegungszustand beurteilen Zum Bewegen die Maus drücken

Wenn die Maus gedrückt wird

box.onmousedown = Funktion(e) {
                var e = e || window.event; //Verwenden Sie das Ereignisobjekt, um die Mausposition abzurufen x = e.clientX - box.offsetLeft;
                y = e.clientY - box.offsetTop;
                isDrop = true; //Auf true setzen, um anzuzeigen, dass es verschoben werden kann}

e.clientX ist die Position der Maus auf der X-Achse, e.clientY ist die Position der Maus auf der Y-Achse, box.offsetLeft erhält den Abstand zwischen dem Div und der linken Seite und box.offsetTop erhält den Abstand zwischen dem Div und der oberen Seite.

Wie in der folgenden Abbildung gezeigt, können wir mit e.clientX - box.offsetLeft den Abweichungswert zwischen Koordinatenpunkt x und box.offsetLeft ermitteln. Wir müssen diesen Abweichungswert vom Koordinatenpunkt x abziehen, um die tatsächliche Distanz zu erhalten, um die sich das Div relativ nach links bewegt hat. In ähnlicher Weise erhält e.clientY - box.offsetTop den Distanzversatz von oben.

Wenn sich die Maus bewegt

Um zu verhindern, dass durch eine zu schnelle Mausbewegung das Ereignis nicht korrekt verarbeitet werden kann, wird das Ereignis an das Dokument gebunden.

Dokument.onmousemove = Funktion(e) {
         //Ist es im beweglichen Zustand if(isDrop) {
                    var e = e || Fenster.Ereignis;
              
                     var moveX = e.clientX - x; //Abstand nach links ermitteln var moveY = e.clientY - y; //Abstand nach oben ermitteln box.style.left = moveX + "px";
                      box.style.top = moveY + "px";
          }anders{
                       zurückkehren ;
          }

            }

e.clientX – x-Mauspunktkoordinaten minus Abweichung ergeben den Abstand vom Div nach links, e.clientY – y-Mauspunktkoordinaten minus Abweichung ergeben den Abstand vom Div nach oben. Ordnen Sie die linke und obere Ecke des Div neu zu

Wenn die Maus losgelassen wird

Um zu verhindern, dass zu schnelle Mausbewegungen nicht richtig verarbeitet werden, ist das Ereignis an das Dokument gebunden.

Dokument.onmouseup = Funktion() {
                isDrop = false; //Auf „false“ setzen, um Bewegung zu verhindern}

Jetzt kann das Div gezogen werden, Sie müssen jedoch eine Bereichsbegrenzung hinzufügen. Andernfalls wird das Div aus der Seite herausgezogen, was nicht akzeptabel ist. Daher müssen Sie eine Bereichsbegrenzung hinzufügen. Die maximale mobile Breite des Div ist die Seitenbreite minus der Div-Breite, und das Minimum ist Null. Die maximale Höhe ist die Seitenhöhe minus der Div-Höhe, und das Minimum ist Null. Der Umfang sollte also folgendermaßen geschrieben werden

Dokument.onmousemove = Funktion(e) {
      var e = e || Fenster.Ereignis;
                wenn(ist) {
                    var moveX = e.clientX - x;
                    var moveY = e.clientY - y;
                    var maxX = document.documentElement.clientWidth - box.offsetWidth; // Maximale Distanz, die die X-Achse zurücklegen kann var maxY = document.documentElement.clientHeight - box.offsetHeight; // Maximale Distanz, die die Y-Achse zurücklegen kann // Bereichsgrenze Wenn das Minimum genommen wird, wird das Maximum genommen. Wenn das Maximum genommen wird, wird das Minimum genommen if (moveX < 0) {
                        VerschiebeX=0
                     }sonst wenn(moveX>maxX){
                        verschiebeX=maxX;
                    }
                    
                    wenn(moveY < 0) {
                        bewegeY=0;
                    }sonst wenn(moveY>maxY){
                        bewegeY=maxY; 
                    }

                    box.style.left = moveX + "px";
                    box.style.top = moveY + "px";

                } anders {
                    zurückkehren;
                }

            }

Dieser Effekt wird perfekt erzielt, wir können ihn aber auch so erzielen, wenn der Umfang begrenzt ist.

Der Umfang kann wie folgt ausgedrückt werden

//Bereichsgrenze Minimum zu Maximum Maximum Maximum zu Minimum if (moveX < 0) {
           ZugX = Math.max(0, ZugX) // 0
     }sonst wenn(moveX>maxX){
           bewegeX=Math.min(bewegeX,maxX);//maxX
     }
                    
      wenn(moveY < 0) {
          bewegeY = Math.max(0,bewegeY) //0
      }sonst wenn(moveY>maxY){
           bewegeY=Math.min(bewegeY,maxY); //maxY
      }

Wir können also schreiben

verschiebenX=Math.min(maxX, Math.max(0, verschiebenX));
bewegeY=Math.min(maxY, Math.max(0,bewegeY));

Dann der komplette Code

<!DOCTYPE html>
<html>

    <Kopf>
        <meta charset="UTF-8">
        <Titel></Titel>
        <Stil>
            .Kasten {
                Position: absolut;
                Breite: 200px;
                Höhe: 200px;
                Hintergrund: rot;
            }
        </Stil>
    </Kopf>

    <Text>
        <div Klasse="Box"></div>
        <Skript>
            var box = document.getElementsByClassName("box")[0]; //Element abrufen var x, y; //Die Maus ist vom linken und oberen Rand des div versetzt var isDrop = false; //Bewegungszustand beurteilen Die Maus muss gedrückt werden, um sich zu bewegen box.onmousedown = function(e) {
                var e = e || window.event; //Verwenden Sie das Ereignisobjekt, um die Mausposition abzurufen x = e.clientX - box.offsetLeft;
                y = e.clientY - box.offsetTop;
                isDrop = true; //Auf true setzen, um anzuzeigen, dass es verschoben werden kann}

            Dokument.onmousemove = Funktion(e) {
                //Ist es im beweglichen Zustand if(isDrop) {　
                       var e = e || Fenster.Ereignis;　
                      var moveX = e.clientX - x; //Bewegungsdistanz von links abrufen var moveY = e.clientY - y; //Bewegungsdistanz von oben abrufen //Maximale Bewegungsdistanz var maxX = document.documentElement.clientWidth - box.offsetWidth;
                    var maxY = document.documentElement.clientHeight - box.offsetHeight;

                    //Bereichsbegrenzung: Wenn die Bewegungsdistanz am geringsten ist, nimm das Maximum; wenn die Bewegungsdistanz am größten ist, nimm das Minimum //Bereichsbegrenzungsmethode 1 /* if (moveX < 0) {
                        moveX = 0
                    } sonst wenn(moveX > maxX) {
                        bewegeX = maxX;
                    }

                    wenn(moveY < 0) {
                        bewegeY = 0;
                    } sonst wenn(moveY > maxY) {
                        bewegeY = maxY;
                    } */
                    //Bereichsbegrenzungsmethode 2 moveX=Math.min(maxX, Math.max(0,moveX));
                    
                    bewegeY=Math.min(maxY, Math.max(0,bewegeY));
                    box.style.left = moveX + "px";　
                     box.style.top = moveY + "px";　
                         } anders {
                    zurückkehren;　
                         }

            }

            Dokument.onmouseup = Funktion() {
                isDrop = false; //Auf „false“ setzen, um Bewegung zu verhindern}
        </Skript>
    </body>

</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Verwenden von Javascript zum Implementieren von Maus-Drag-Ereignissen
JS-Implementierung zum Verschieben von Unterfenstern durch Ziehen der Maus
js implementiert die Methode zum Wechseln von Bildern durch Ziehen der Maus
js, um Beispiel einer Mehrfachauswahlfunktion mit der Maus zu erreichen
JS-Maus-Drag-Beispielanalyse
jsMind passt die Knotenposition durch Ziehen der Maus an
js realisiert, dass die Maus zieht div nach links und rechts gleitet
Detaillierte Erklärung der JavaScript-Maus-Drag-Ereignisse
Super cooler Seitenumblättereffekt (Paging) durch Ziehen mit der Maus zum Erzielen von Javascript-Code
js, um Maus-Drag und Zoom-Div-Beispielcode zu erreichen

<<: Parameter, um Iframe transparent zu machen

>>: Detailliertes Tutorial zur Konfiguration von Docker nginx + https-Subdomains

JavaScript implementiert den Div-Maus-Drag-Effekt

React Diff-Algorithmus-Quellcodeanalyse

Vue Grundanleitung Beispiel grafische Erklärung

So verwenden Sie Samba zum Erstellen eines gemeinsamen Dateidienstes auf einem Linux-Server

Der gesamte Prozess der lokalen Konfiguration des Reverse-Proxys über Nginx

Implementierung der Zahlungsfunktion im Vue-Projekt (WeChat-Zahlung und Alipay-Zahlung)

Vue.js-Textfeld mit Dropdown-Komponente

Eine detaillierte Einführung in die Linux-Verzeichnisstruktur

Installation, Konfiguration und Deinstallation von MySQL 8.0 in einer Windows-Umgebung

javascript:void(0) Bedeutung und Anwendungsbeispiele

Zusammenfassung der Bootstrap-Lernerfahrung - Austausch von Designs im CSS-Stil

Artikel empfehlen

Optimierung der Frontend-Leistung von Websites: JavaScript und CSS

Praktisches MySQL + PostgreSQL Batch-Insert-Update insertOrUpdate

Wie können wir für Jiedaibao werben, damit sich jeder anmeldet? Methoden und Fähigkeiten zur Förderung von Jiedaibao

JavaScript-Entwurfsmuster, Lernadaptermuster

Mehrere Situationen, die dazu führen, dass MySQL einen vollständigen Tabellenscan durchführt

So erstellen Sie ein Tomcat-Image basierend auf Dockerfile

Beispielcode für MySQL-Datensicherung und -wiederherstellung

Grafisches Tutorial zur Installation und Konfiguration von VMware Tools für Ubuntu 16.04 64-Bit

Tiefgreifendes Verständnis von Worker-Threads in Node.js

Lokale Vue-Komponentendatenfreigabe Vue.observable()-Nutzung

Grafisches Tutorial zur kostenlosen Installationsversion von MySQL 5.7.17 winx64

So verwenden Sie CSS-Variablen in JS

10 Leistungskonfigurationselemente, die nach der Installation von MySQL angepasst werden müssen

So stellen Sie mit Docker ein einfaches C/C++-Programm bereit

So konfigurieren Sie ein Jupyter-Notebook im Docker-Container