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

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

Artikel empfehlen

Die Webseite kann nicht geöffnet werden, da dem Div-Element ein schließender Tag fehlt

Zuerst dachte ich, es läge an der Geschwindigkeit ...

Einige nützliche Methoden zur Meta-Einstellung (unbedingt lesen)

<meta name="viewport" content="...

So legen Sie MySQL-Berechtigungen mit phpmyadmin fest

Inhaltsverzeichnis Schritt 1: Melden Sie sich als...

Eine kurze Analyse des Zugriffs auf Windows 10-Hostordner von virtuellen CentOS 8-Maschinen aus

Nach der Installation von VMware Tools ① kann Tex...

So legen Sie einen Alias ​​für einen benutzerdefinierten Pfad in Vue fest

So konfigurieren Sie benutzerdefinierte Pfadalias...

Detaillierte Erläuterung des MySQL Workbench-Nutzungs-Tutorials

Inhaltsverzeichnis (I) Verwenden von Workbench zu...

Beispiel für die Implementierung eines gestrichelten Rahmens mit html2canvas

html2canvas ist eine Bibliothek, die Canvas aus H...

JavaScript navigator.userAgent erhält Browserinformationen – Fallerklärung

Der Browser ist für uns wahrscheinlich das vertra...

Eine kurze Analyse des Unterschieds zwischen ref und toRef in Vue3

1. ref wird kopiert, die Ansicht wird aktualisier...

Detaillierte Erklärung dieses Zeigeproblems in JavaScript

Vorwort Glauben Sie mir, solange Sie sich an die ...

Ein umfassendes Verständnis der funktionalen Komponenten von Vue.js

Inhaltsverzeichnis Vorwort Funktionale React-Komp...

Empfehlen Sie 60 Paging-Fälle und bewährte Vorgehensweisen

<br />Struktur und Hierarchie reduzieren die...

Was macht der legendäre VUE-Syntax-Sugar?

Inhaltsverzeichnis 1. Was ist syntaktischer Zucke...

So fügen Sie der Seite über Element UI eine Seitennavigationsleiste hinzu

brauchen Fügen Sie eine Paging-Leiste hinzu, die ...

Implementierung der privaten Docker-Bibliothek

Die Installation und Bereitstellung eines private...