JavaScript implementiert die Maussteuerung eines frei beweglichen Fensters

In diesem Artikel wird der spezifische JavaScript-Code zur Realisierung der Maussteuerung eines freien Fensters zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Fenster mit der Maus verschieben</title>
    <Stil>
        .mainDiv {
            Breite: 350px;
            Höhe: 200px;
            Rand: 2px schwarz durchgezogen;
            Position: absolut;
        }

        .titleDiv {
            Breite: 350px;
            Höhe: 30px;
            Hintergrundfarbe: GelbGrün;
            Textausrichtung: zentriert;
            Zeilenhöhe: 30px;
        }

        .contentDiv {
            Breite: 350px;
            Höhe: 170px;
            Hintergrundfarbe: Sandbraun;
            Textausrichtung: zentriert;
        }
    </Stil>
</Kopf>
<Text>
<!--onmousedown: Das Ereignis tritt ein, wenn die Maustaste gedrückt wird; onmousemove: Das Ereignis tritt ein, wenn der Mauszeiger zum angegebenen Objekt bewegt wird-->
<div Klasse="mainDiv" id="mainDiv" Stil="oben: 20px;links: 20px">
    <div Klasse="titleDiv" id="titleDiv" onmousedown="Maus nach unten()" onmouseup="Maus nach oben()">
        Titelleiste</div>
    <div Klasse="InhaltsDiv">
        《Freies Fenster mit der Maus steuerbar》<br>
        Hinweis: MainDiv kann nicht verschoben werden, bevor seine Position auf absolut gesetzt ist</div>
</div>
<Skript>
    var dx;
    vardy;
    var mainDivObj = null;
    var titleDivObj = null;

    /**
     * Mausdrückfunktion, führe diese Funktion aus, wenn die Maus gedrückt wird*/
    Funktion MausRunter() {
        //Erhalte den Wert der Maustaste. 0 ist die linke Maustaste, 1 ist die Scroll-Taste der Maus, 2 ist die rechte Maustaste. if (event.button == 0) {
            mainDivObj = document.getElementById("mainDiv");
            titleDivObj = document.getElementById("titleDiv");
            //Mausstil festlegen titleDivObj.style.cursor = "move";
            //Den Schattenstil des Haupt-Div festlegen mainDivObj.style.boxShadow = "0px 0px 10px #000";
            //Die aktuellen Koordinaten der Maus abrufen let x = event.x;
            sei y = Ereignis.y;
            dx = x - parseInt(mainDivObj.style.left);
            dy = y - parseInt(mainDivObj.style.top);

        }
    }

    //Aufruf, wenn die Maus bewegt wird document.onmousemove = mouseMove;

    /**
     * Drücken Sie die Maus, um die Funktion zu verschieben. Wenn sich die Maus bewegt, wird die Funktion ausgeführt, um das Div zu verschieben
     */
    Funktion Mausbewegung() {
        wenn (mainDivObj != null) {
            //Koordinatenposition der aktuellen Mausbewegung abrufen let x = event.x; //X-Achsenkoordinate der Mausbewegung let y = event.y; //Y-Achsenkoordinate der Mausbewegung //Distanz zwischen der linken und oberen Seite des Div nach der Bewegung berechnen //Die aktuellen Koordinaten verwenden, um die Distanz zwischen der Mausposition im Div und der linken und oberen Seite des Div zu subtrahieren let left = x - dx;
            sei top = y - dy;
            //Neue Koordinatenposition von div festlegen mainDivObj.style.left = left + "px";
            mainDivObj.style.top = oben + "px";
        }
    }
    /**
     * Maus-Loslassen-Funktion, diese Funktion wird ausgeführt, wenn die Maus losgelassen wird*/
    Funktion Maus nach oben () {
        wenn (mainDivObj != null) {
            dx = null;
            dy = null;
            //Den Schattenstil von div festlegen mainDivObj.style.boxShadow="none";
            mainDivObj = null;
            titleDivObj.style.cursor="Zeiger";
            titleDivObj = null;
        }
    }
</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:

Implementierung eines Vier-Fenster-Chats in der Sprache C
Implementierung des Java-Gleitfenster-Maximalwerts
C# imitiert QQ-Chatfenster
Visualisierungstool PyVista Multithread-Anzeige mehrerer Fenster Beispielcode
Pyqt5 implementiert Fensterskalierung und automatische Skalierung von Steuerelementen innerhalb des Fensters
Codierungsbeispiel für die Grundlagen von Android-Widgets
Implementierung von Selenium Multi-Window Switching für Python-Crawler
Detaillierte und umfassende Erklärung des Java-Fensters

<<: Beispiel für die Erschöpfung der MySQL-Auto-Increment-ID

>>: Hadoop 3.1.1 Vollständig verteiltes Installationshandbuch unter CentOS 6.8 (empfohlen)