js, um einen einfachen Drag-Effekt zu erzielen

js, um einen einfachen Drag-Effekt zu erzielen

In diesem Artikel wird der spezifische Code von js zur Erzielung eines einfachen Drag-Effekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

1. Grundlegende Effekte des Ziehens

Ideen:

Wenn die Maus auf die Box gedrückt wird, ist sie bereit zur Bewegung (das Ereignis wird dem Objekt hinzugefügt).

Wenn die Maus bewegt wird, folgt die Box der Maus (das Ereignis wird der Seite hinzugefügt)

Wenn die Maus angehoben wird, stoppt die Bewegung der Box (das Ereignis wird der Seite hinzugefügt).

var o = document.querySelector('div');
 
        //Maus runter o.onmousedown = function (e) {
            //Mausposition relativ zur Box var offsetX = e.clientX - o.offsetLeft;
            var offsetY = e.clientY - o.offsetTop;
            //Mausbewegung document.onmousemove = function (e) {
                o.style.left = e.clientX - offsetX + "px";
                o.style.top = e.clientY - offsetY + "px";
            }
            //Maus hoch document.onmouseup = function () {
                Dokument.onmousemove = null;
                Dokument.onmouseup = null;
            }
        }

2. Drag & Drop-Probleme

Wenn in der Box Text angezeigt wird oder die Box selbst ein Bild ist, können wir aufgrund des Standardverhaltens des Browsers (Text und Bilder können gezogen werden) „return false“ festlegen, um das Standardverhalten zu verhindern. Dieses Abfangen des Standardverhaltens ist jedoch in niedrigeren IE-Versionen nicht anwendbar. Sie können das IE-Problem mithilfe der globalen Erfassung lösen.

Globale Erfassung

Die globale Erfassung ist nur auf niedrigere IE-Versionen anwendbar.

<button>btn1</button>
    <button>btn2</button>
    <Skript>
        var bts = document.querySelectorAll('Schaltfläche')
 
        bts[0].onclick = Funktion () {
            konsole.log(1);
        }
        bts[1].onclick = Funktion () {
            konsole.log(2);
        }
 
        // bts[0].setCapture() //Globale Erfassung hinzufügen // bts[0].releaseCapture() ; //Globale Erfassung freigeben</script>

Sobald eine globale Erfassung für einen angegebenen Knoten hinzugefügt wurde, lösen andere Elemente auf der Seite nicht mehr denselben Ereignistyp aus.

3. Vollversion von Drag & Drop

var o = document.querySelector('div');
 
        //Maus runter o.onmousedown = function (e) {
            if (o.setCapture) { //IE niedrigere Version o.setCapture()
            }
            e = e || Fenster.Ereignis
            //Mausposition relativ zur Box var offsetX = e.clientX - o.offsetLeft;
            var offsetY = e.clientY - o.offsetTop;
            //Mausbewegung document.onmousemove = function (e) {
                e = e || Fenster.Ereignis
                o.style.left = e.clientX - offsetX + "px";
                o.style.top = e.clientY - offsetY + "px";
            }
            //Maus hoch document.onmouseup = function () {
                Dokument.onmousemove = null;
                Dokument.onmouseup = null;
                wenn (o.releaseCapture) {
                    o.releaseCapture(); //Globale Erfassung freigeben}
            }
            return false; //Standardverhalten von Standardbrowsern}

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:
  • JQuery-Dialog (JS-Modalfenster, verschiebbares DIV)
  • Analyse der Verwendung der Drag & Drop-Sortierung von Sortable.js
  • js, um einen Drag-Effekt zu erzielen
  • JavaScript implementiert die Touchscreen-Drag-Funktion auf mobilen Endgeräten
  • Einfacher Drag-Effekt mit js implementiert
  • JS realisiert einen schönen Fenster-Drag-Effekt (Größe kann geändert, maximiert, minimiert, geschlossen werden)
  • Beispiel einer Drag-and-Drop-Upload-Funktion für Dateien, die von JS implementiert wurde
  • Verwenden von Javascript zum Implementieren von Maus-Drag-Ereignissen
  • Implementierungscode für den Drag-Effekt der JS-Komponente Bootstrap Table Table
  • JavaScript implementiert den horizontalen Fortschrittsbalken-Drag-Effekt

<<:  js, um einen Boden-Scrolling-Effekt zu erzielen

>>:  Beispielcode zur Konvertierung von http in https mit nginx

Artikel empfehlen

Detaillierte Erklärung von MySQL Explain

Bei unserer täglichen Arbeit führen wir manchmal ...

Nicht standardmäßiger Implementierungscode für die MySQL UPDATE-Anweisung

Heute werde ich Ihnen einen Unterschied zwischen ...

Zusammenfassung der Vorteile von Vue3 gegenüber Vue2

Inhaltsverzeichnis 1. Warum brauchen wir vue3? 2....

Docker-Compose-Schritte zum Konfigurieren der Spring-Umgebung

Vor Kurzem musste ich das Projekt für die Mitglie...

Implementierung der Multi-Environment-Konfiguration (.env) des Vue-Projekts

Inhaltsverzeichnis Was ist eine Multiumgebungskon...

So fügen Sie Docker dynamisch Ports hinzu, ohne das Image neu zu erstellen

Manchmal müssen Sie während des Betriebs freigege...

Detaillierte Erklärung der MySQL-Gruppensortierung, um die Top N zu finden

MySQL-Gruppensortierung, um die obersten N zu fin...

Tipps zur Optimierung von MySQL SQL-Anweisungen

Wenn wir mit einer SQL-Anweisung konfrontiert wer...

SpringBoot integriert Activiti7-Implementierungscode

Nach der offiziellen Veröffentlichung von Activit...

Vollständiger Vue-Code zur Implementierung der Single-Sign-On-Steuerung

Hier ist zu Ihrer Information eine Vue-Single-Sig...

Regeln für die Verwendung gemeinsamer MySQL-Indizes

Ein gemeinsamer Index wird auch als zusammengeset...

Beispielcode zur Implementierung transparenter Verlaufseffekte mit CSS

Die Titelbilder in den Spalten von Zhihu Discover...

So implementieren Sie vertikale Textausrichtung mit CSS (Zusammenfassung)

Die Standardanordnung von Text in HTML ist horizo...