JavaScript zum Erzielen eines Mauszieheffekts

In diesem Artikel wird der spezifische JavaScript-Code zum Erzielen des Mauszieheffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Das Effektbild ist diesmal wie folgt:

Ich denke, die Schwierigkeit bei diesem Experiment besteht darin, die relative Position der Box und der Maus unverändert zu lassen und durch Drücken und Bewegen der Maus den Zieheffekt zu erzielen.

Wie erreicht man den Drag-Effekt?

Wir müssen drei Funktionen verwenden: onmousedown , onmousemove und onmouseup , die jeweils das Drücken, Bewegen und Anheben der Maus darstellen.

In der Rückruffunktion des Mausklicks müssen wir die Anfangsposition der Maus über clientX und clientY abrufen, die Anfangsposition des Felds über offsetLeft und offsetTop abrufen und dann die Differenz zwischen der Anfangsposition der Maus und der Anfangsposition des Felds berechnen.

In der Callback-Funktion für die Mausbewegung müssen wir die aktuelle Position des Felds basierend auf der Mausposition und der zuvor berechneten Differenz ermitteln und dann die linken und oberen Werte ändern. Vergessen Sie nicht, die Position auf absolut zu setzen (weil ich es vergessen habe ...)

In der Rückruffunktion von „Maus hoch“ müssen wir die Mausbewegung und das Hochfahren der Maus löschen, indem wir onmousemove und onmouseup auf null setzen.

Achtung! ! !

Die Mausbewegungsfunktion und die Maushebefunktion sollten in die Mausdrückfunktion geschrieben werden, da wir das nachfolgende Verhalten nach dem Drücken der Maus entwerfen möchten und Folgendes sehr wichtig ist:

Die Funktion „Maus nach unten“ gehört dem Div, die Funktion „Maus bewegen“ und „Maus nach oben“ gehört dem Dokument.

Denn wir wollen nicht die Maus im div bewegen, sondern die ganze Seite

Die wichtigsten Punkte sind wahrscheinlich diese. Hier ist der Code:

<!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>
    <Stil>
        #Kasten{
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: Aquamarin;
            Rahmenradius: 14px;
            Kastenschatten: 2px 2px 6px rgba (0,0,0,.3);

            /* Hey Leute, ihr wollt euch bewegen und die linke Seite ändern, ohne die Position festzulegen. . . */
            Position: absolut;
        }
    </Stil>
</Kopf>
<Text>
    <div id="box"></div>
    <Skript>
        let box = document.getElementById("box");
        box.onmousedown=Funktion(Ereignis){
            let disx = event.clientX-box.offsetLeft;
            let disy=event.clientY-box.offsetTop;
            //Dies ist nicht box.onmousemove, sondern document.onmousemove.
            document.onmousemove=Funktion(Ereignis){
                box.style.left=event.clientX-disx+'px';
                box.style.top=event.clientY-disy+'px';
            }

            //In ommousedown zu schreiben document.onmouseup=function(){
                //Setze beide auf null
            Dokument.onmousemove=null;
            Dokument.onmouseup=null;
            gibt false zurück;
        }
        }
        
    </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
js, um Maus-Drag und Zoom-Div-Beispielcode zu erreichen
JavaScript verwendet Canvas, um die Mausziehfunktion zu implementieren

<<: So deinstallieren Sie MySQL sauber (getestet und effektiv)

>>: CSS realisiert die Layoutmethode „Fest links“ und „Adaptiv rechts“

Eine benutzerfreundliche Alternative in Linux (Befehl fd)

JavaScript zum Erzielen eines Mauszieheffekts

Eine benutzerfreundliche Alternative in Linux (Befehl fd)

Detaillierte Erläuterung der Lösung für npm ls-Fehler, die durch das fsevents-Modul unter Linux verursacht werden

Tipps zur Verwendung von Vue-Elementen und Nuxt

Beispiele für die Implementierung von Fortschrittsbalken und Reihenfolge-Fortschrittsbalken mit CSS

Prioritätsanalyse von und/oder Abfragen in MySQL

Leitfaden zur effizienten Nutzung von MySQL-Indizes

MySQL-Sortierung zum Abrufen eines Ranking-Beispielcodes

Schritte zum Ausführen von ASP.NET Core im Docker-Container

Implementierungsschritte zur Installation eines Redis-Containers in Docker

Erfahren Sie mehr über die MySQL-Speicher-Engine

Artikel empfehlen

Das WeChat-Applet realisiert die Chatroom-Funktion

mysql 8.0.18 mgr-Installation und seine Umschaltfunktion

Detaillierte Anweisungen zum Download und Installationsprozess von MySQL 5.7.18

Lösung für das domänenübergreifende Problem der SpringBoot- und Vue-Interaktion

Beispielcode, wie CSS mehrere Klassen abgleicht

CSS3 implementiert einen Fußbereich, der unten fixiert ist (immer unten, egal wie hoch die Seite ist).

Lösung für MySQL-Fehlercode 1862 Ihr Passwort ist abgelaufen

Verwendung von VNode in Vue.js

Der einfachste Weg, einen neuen Benutzer zu erstellen und Berechtigungen für MySQL zu erteilen

CocosCreator Erste Schritte Tutorial: Netzwerkkommunikation

So implementieren Sie On-Demand-Import und globalen Import in Element-Plus

Detaillierte Erläuterung verschiedener Speichermethoden von Docker-Containern

Grafisches Tutorial zur Installation und Konfiguration der MySQL 5.7.21-Dekomprimierungsversion

Lösung für MySql-Fehler 1698 (28000)

FEHLER 1045 (28000): Zugriff verweigert für Benutzer ''root''@''localhost'' (mit Passwort: JA) Praktische Lösung