JavaScript-Offset implementiert die Erfassung der Mauskoordinaten und das Ziehen von Modulen innerhalb des Fensters

Versatz

Offset ist der Offset. Mithilfe der Offset-Reihe verwandter Eigenschaften können Sie die Position (den Offset), die Größe usw. des Elements dynamisch abrufen, z. B.:
Ermitteln Sie die Größe (Breite und Höhe) des Elements anhand der Position des positionierten übergeordneten Elements
Hinweis: Der zurückgegebene Wert hat keine Einheit.

Zu den häufig verwendeten Attributen der Offset-Serie gehören:
element.offsetParent
Gibt das Element zurück, das das übergeordnete Element dieses Elements mit Positionierung ist. Wenn das übergeordnete Element nicht positioniert ist, wird body zurückgegeben.
Beachten Sie, dass zwischen parentNode und offsetParent ein wesentlicher Unterschied besteht: parentNode gibt das direkte übergeordnete Element zurück, während offsetParent das übergeordnete Element mit Positionierung zurückgibt.
element.offsetTop
Gibt das Element mit dem Versatz über dem übergeordneten Element zurück.
Element.OffsetLeft
Gibt das Element mit dem Offset der linken Grenze des positionierten übergeordneten Elements zurück.
element.offsetWidth
Gibt die Breite des Inhaltsbereichs einschließlich Polsterung, Rändern und Inhaltsbereich zurück. Der zurückgegebene Wert enthält keine Einheiten.
element.offsetHeight
Gibt die Höhe des Elements einschließlich Polsterung, Rahmen und Inhaltsbereich zurück. Der zurückgegebene Wert enthält keine Einheiten.

Der Unterschied zwischen Offset und Stil

Versatz	Stil
Offset kann den Stilwert in jedem Stylesheet abrufen	Stil kann nur den Stilwert im Inline-Stylesheet abrufen und kann den eingebetteten Stil nicht abrufen
Die durch die Offset-Reihe erhaltenen Werte sind einheitenlos.	`style.width` erhält einen String mit Einheiten
offsetWidth beinhaltet padding+border+width	`style.width` erhält den Wert ohne Polsterung und Rahmen
OffsetWidth und andere Eigenschaften sind schreibgeschützte Eigenschaften, die nur abgerufen, aber nicht zugewiesen werden können.	Das Style-Attribut ist ein Lese-/Schreibattribut. `style.width` kann abgerufen oder zugewiesen werden.
Wenn Sie nur die Größe und Position eines Elements ermitteln möchten, ist die Verwendung des Offsets besser geeignet	Wenn Sie den Stil eines Elements ändern möchten, ist es besser, Stil zu verwenden

Fall 1: Echtzeitanzeige der Mauskoordinaten

Demo

<!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>Mausposition abrufen-01</title>
		<Stil>
			.Kasten {
				Breite: 500px;
				Höhe: 500px;
				Hintergrundfarbe: #55aaff;
				Rand links: 50px;
			}
		</Stil>
	</Kopf>
	<Text>
		<p>Holen Sie sich die Mauskoordinaten in der Box</p>
		<div Klasse="Box"></div>
		<Skript>
			// Klicken Sie in die Box und möchten Sie den Abstand zwischen der Maus und der Box ermitteln // Implementierung:
			// 1. Holen Sie sich die Koordinaten der Maus auf der Seite, e.pageX, e.pageY
			// 2. Ermitteln Sie den Abstand der Box zur Seite, box.offsetLeft, box.offsetTop
			// 3. Durch Subtrahieren der beiden Werte erhalten Sie die Koordinaten der Maus im Feld. // Sehen wir uns unten den Implementierungsprozess an!
			const box = document.querySelector(".box");
			box.addEventListener("Mausbewegung", Funktion(e) {
				// console.log(e.seiteX, e.seiteY);
				// Konsole.log(box.offsetLeft, box.offsetTop);
				const x = e.pageX - this.offsetLeft;
				const y = e.pageY - this.offsetTop;
				box.textinhalt = `x: ${x}, y: ${y}`;
			});
		</Skript>
	</body>
</html>

Fall 2: Drag-Modul

Demo

<!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>Modul Drag-02</title>
    <Stil>
      * {
        Rand: 0;
        Polsterung: 0;
      }
      .Login,
      .modal {
        Anzeige: keine;
      }
      .Anmelden {
        Breite: 512px;
        Höhe: 280px;
        Position: fest;
        Rand: #ebebeb durchgezogen 1px;
        links: 50%;
        oben: 50 %;
        Hintergrundfarbe: #fff;
        Kastenschatten: 0 0 20px #ddd;
        Z-Index: 999;
        transformieren: übersetzen(-50 %, -50 %);
        Textausrichtung: zentriert;
      }
      .modal {
        Position: absolut;
        oben: 0;
        links: 0;
        Breite: 100vw;
        Höhe: 100vh;
        Hintergrundfarbe: rgba(0, 0, 0, 0,3);
        Z-Index: 998;
      }
      .login-inhalt {
        Rand: 100px automatisch;
        Textausrichtung: zentriert;
      }
      .login-content h3:hover,
      .closeBtn:hover {
        Cursor: Zeiger;
      }
      .closeBtn {
        Position: absolut;
        rechts: 10px;
        oben: 10px;
      }
      .login h4 {
        Rand oben: 10px;
      }
      .login h4:hover {
        Cursor: bewegen;
      }
    </Stil>
  </Kopf>
  <Text>
    <div Klasse="Anmeldeinhalt">
      <h3 id="openLogin">Klicken Sie, um das Simulationsfeld anzuzeigen</h3>
    </div>
    <div Klasse="Anmelden">
      <div class="closeBtn" id="closeBtn">Schließen</div>
      <h4 class="loginHeader">Klicken Sie hier, um zu ziehen</h4>
    </div>
    <div Klasse="modal"></div>
    <Skript>
      //Element abrufen const login = document.querySelector(".login");
      const modal = document.querySelector(".modal");
      const closeBtn = document.querySelector("#closeBtn");
      const openLogin = document.querySelector("#openLogin");
      // Klicken Sie auf das Anzeigeelement openLogin.addEventListener("click", () => {
        modal.style.display = "Block";
        login.style.display = "Block";
      });
      closeBtn.addEventListener("klicken", () => {
        modal.style.display = "keine";
        login.style.display = "keine";
      });
      // Implementieren Sie die Drag & Drop-Funktion // 1. Drücken Sie die Maus, um die Koordinaten der Maus im Feld abzurufen const loginHeader = document.querySelector(".loginHeader");
      loginHeader.addEventListener("mousedown", Funktion (e) {
        const x = e.pageX - login.offsetLeft;
        const y = e.pageY - login.offsetTop;
        const verschieben = Funktion (e) {
          login.style.left = `${e.pageX - x}px`;
          login.style.top = `${e.pageY - y}px`;
        };
        // 2. Bewegen Sie die Maus. document.addEventListener("mousemove", move);
        document.addEventListener("mouseup", Funktion () {
          document.removeEventListener("mousemove", verschieben);
        });
      });
    </Skript>
  </body>
</html>

Dies ist das Ende dieses Artikels über die Verwendung von JavaScript-Offset zum Abrufen von Mauskoordinaten und zum Ziehen von Modulen innerhalb des Fensters. Weitere Informationen zur Verwendung von JavaScript zum Abrufen von Mauskoordinaten und zum Ziehen von Modulen innerhalb des Fensters finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Beispiel, wie man mit JS den Abstand zwischen der Mausposition und dem Browserfenster ermittelt
JS bestimmt die Richtung der Maus, die in den Container eintritt, und das Problem, dass window.open new window blockiert wird
Detaillierte Erläuterung des JS-Beispiels zur Implementierung eines schwebenden Popup-Fensters (unterstützt Ziehen und Schließen mit der Maus)
JS implementiert die Methode zur Simulation der Mausbewegung beim Laden des Fensters
Breite und Höhe des Javascript-Fensters, Mausposition, Scrollhöhe (detaillierte Analyse)
JavaScript implementiert die Maussteuerung eines frei beweglichen Fensters

<<: So fügen Sie in 88 Sekunden 10 Millionen Datensätze in eine MySQL-Datenbanktabelle ein

>>: Nginx verwendet Reverse-Proxy, um eine Analyse des Lastausgleichsprozesses zu implementieren

Detaillierte Erklärung zur Verwendung des Befehls tcpdump zum Erfassen und Analysieren von Datenpaketen in Linux

JavaScript-Offset implementiert die Erfassung der Mauskoordinaten und das Ziehen von Modulen innerhalb des Fensters

Versatz

Fall 1: Echtzeitanzeige der Mauskoordinaten

Fall 2: Drag-Modul

Detaillierte Erklärung zur Verwendung des Befehls tcpdump zum Erfassen und Analysieren von Datenpaketen in Linux

Webdesign: Die genaue Platzierung und Verwendung massiver Materialien

Reflexion und Proxy in Front-End-JavaScript

Lösung für die leere Zeile vor der UTF-8-codierten Webseite, wenn sie Dateien enthält

So verwenden Sie den Nginx-Proxy zum Surfen im Internet

Detaillierte Erklärung zur Verwendung des CMD-Befehls zum Bedienen einer MySql-Datenbank

So stellen Sie verschiedene Mausformen dar

CnBlogs - Teilen im benutzerdefinierten Blogstil

Erfahren Sie mehr über JavaScript-Iteratoren

4 flexible SCSS-Kompilierungsausgabestile

Artikel empfehlen

Der Unterschied zwischen absolutem und relativem Pfad bei der Webseitenerstellung

Installieren und konfigurieren Sie MySQL 5.7 unter CentOS 7

Zusammenfassung wissenschaftlicher Grundlagen und Anregungen für Webdesign und -produktion

Detaillierte Beschreibung der Unicode-Signatur-BOM

JavaScript-Grundlagenobjekte

Reines js, um einen Schreibmaschineneffekt zu erzielen

Detaillierte Erläuterung von acht Methoden zum Korrigieren des CSS-Seitenendes

Implementierung der Installation von Docker in einer Win10-Umgebung

Darstellung von Eigenschaften wie OffsetWidth, ClientWidth, ScrollWidth, ScrollTop, ScrollLeft usw.

Beispielcode zum Konvertieren des Mysql-Abfrageergebnissatzes in JSON-Daten

W3C Tutorial (8): W3C XML Schema Aktivitäten

Zusammenfassung der Probleme, die bei der Verwendung von JDBC zur Verbindung mit einer MySQL-Datenbank auftreten können

Ubuntu 20.04 CUDA- und cuDNN-Installationsmethode (grafisches Tutorial)

MySQL implementiert Zeichenfolgenverkettung, Abfangen, Ersetzen und Positionssuchvorgänge

Detaillierte Erklärung der 4 Möglichkeiten zum Importieren von CSS-Dateien: inline, inline, extern und importiert