JavaScriptオフセットは、ウィンドウ内でのマウス座標の取得とモジュールのドラッグを実装します。

オフセット

Offset はオフセットです。関連プロパティの offset シリーズを使用すると、次のように要素の位置 (オフセット)、サイズなどを動的に取得できます。
配置された親要素の位置から要素のサイズ（幅と高さ）を取得します。
注: 返される値には単位がありません。

オフセットシリーズでよく使用される属性は次のとおりです。
要素.オフセット親
この要素の親である要素を位置指定付きで返します。親要素が位置指定されていない場合は、body を返します。
parentNode と offsetParent には本質的な違いがあることに注意してください。parentNode は直接の親要素を返しますが、 offsetParent は配置された親要素を返します。
要素.オフセットトップ
親要素より上のオフセットを持つ要素を返します。
要素.オフセット左
配置された親の左境界のオフセットを持つ要素を返します。
要素.オフセット幅
パディング、境界線、コンテンツ領域を含むコンテンツ領域の幅を返します。返される値には単位は含まれません。
要素.オフセット高さ
パディング、境界線、コンテンツ領域を含む要素の高さを返します。返される値には単位は含まれません。

オフセットとスタイルの違い

オフセット	スタイル
オフセットはどのスタイルシートでもスタイル値を取得できる	スタイルはインラインスタイルシート内のスタイル値のみを取得でき、埋め込まれたスタイルを取得することはできません。
オフセットシリーズで得られる値は単位なしです。	`style.width`単位付きの文字列を取得します
offsetWidthにはパディング+ボーダー+幅が含まれます	`style.width`パディングとボーダーを除いた値を取得します
OffsetWidth およびその他のプロパティは読み取り専用プロパティであり、取得することはできますが、割り当てることはできません。	style 属性は読み取り/書き込み属性です`style.width`を取得または割り当てることができます。
要素のサイズと位置だけを取得したい場合は、オフセットを使用する方が適切です。	要素のスタイルを変更したい場合は、スタイルを使用する方が適切です。

ケース1: マウス座標のリアルタイム表示

デモ

<!DOCTYPE html>
<html lang="ja">
	<ヘッド>
		<メタ文字セット="UTF-8" />
		<meta http-equiv="X-UA-compatible" content="IE=edge" />
		<meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
		<title>マウスの位置を取得する-01</title>
		<スタイル>
			。箱 {
				幅: 500ピクセル;
				高さ: 500px;
				背景色: #55aaff;
				左マージン: 50px;
			}
		</スタイル>
	</head>
	<本文>
		<p>ボックス内のマウス座標を取得します</p>
		<div class="box"></div>
		<スクリプト>
			// ボックス内をクリックし、マウスとボックス間の距離を取得します // 実装:
			// 1. ページ上のマウスの座標を取得します。e.pageX、e.pageY
			// 2. ボックスからページまでの距離を取得する、box.offsetLeft、box.offsetTop
			// 3. 2 つを減算すると、ボックス内のマウスの座標が得られます // 実装プロセスを以下で見てみましょう。
			定数ボックス = document.querySelector(".box");
			box.addEventListener("mousemove", 関数(e) {
				// コンソールログ(e.pageX, e.pageY);
				// console.log(box.offsetLeft、box.offsetTop);
				定数 x = e.pageX - this.offsetLeft;
				定数 y = e.pageY - this.offsetTop;
				box.textContent = `x: ${x}, y: ${y}`;
			});
		</スクリプト>
	</本文>
</html>

ケース2: ドラッグモジュール

デモ

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta http-equiv="X-UA-compatible" content="IE=edge" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>モジュールドラッグ-02</title>
    <スタイル>
      * {
        マージン: 0;
        パディング: 0;
      }
      。ログイン、
      .モーダル{
        表示: なし;
      }
      。ログイン {
        幅: 512ピクセル;
        高さ: 280px;
        位置: 固定;
        境界線: #ebebeb 実線 1px;
        左: 50%;
        上位: 50%;
        背景色: #fff;
        ボックスシャドウ: 0 0 20px #ddd;
        zインデックス: 999;
        変換: translate(-50%, -50%);
        テキスト配置: 中央;
      }
      .モーダル{
        位置: 絶対;
        上: 0;
        左: 0;
        幅：100vw;
        高さ：100vh;
        背景色: rgba(0, 0, 0, 0.3);
        zインデックス: 998;
      }
      .ログインコンテンツ{
        マージン: 100px 自動;
        テキスト配置: 中央;
      }
      .ログインコンテンツ h3:hover,
      .closeBtn:ホバー{
        カーソル: ポインタ;
      }
      .closeBtn{
        位置: 絶対;
        右: 10px;
        上: 10px;
      }
      .ログインh4{
        上マージン: 10px;
      }
      .ログイン h4:hover {
        カーソル: 移動;
      }
    </スタイル>
  </head>
  <本文>
    <div class="ログインコンテンツ">
      <h3 id="openLogin">クリックするとシミュレーション ボックスがポップアップします</h3>
    </div>
    <div class="ログイン">
      <div class="closeBtn" id="closeBtn">閉じる</div>
      <h4 class="loginHeader">クリックしてドラッグ</h4>
    </div>
    <div class="modal"></div>
    <スクリプト>
      // 要素を取得します const login = document.querySelector(".login");
      定数 modal = document.querySelector(".modal");
      定数 closeBtn = document.querySelector("#closeBtn");
      定数 openLogin = document.querySelector("#openLogin");
      // 表示要素をクリックします openLogin.addEventListener("click", () => {
        modal.style.display = "ブロック";
        login.style.display = "ブロック";
      });
      closeBtn.addEventListener("クリック", () => {
        modal.style.display = "なし";
        login.style.display = "なし";
      });
      // ドラッグ アンド ドロップ機能を実装します // 1. マウスを押してボックス内のマウスの座標を取得します const loginHeader = document.querySelector(".loginHeader");
      loginHeader.addEventListener("mousedown", 関数(e) {
        定数 x = e.pageX - login.offsetLeft;
        定数 y = e.pageY - login.offsetTop;
        定数移動 = 関数 (e) {
          login.style.left = `${e.pageX - x}px`;
          login.style.top = `${e.pageY - y}px`;
        };
        // 2. マウスを移動します document.addEventListener("mousemove", move);
        document.addEventListener("mouseup", 関数() {
          document.removeEventListener("mousemove"、移動);
        });
      });
    </スクリプト>
  </本文>
</html>

これで、JavaScript オフセットを使用してマウス座標を取得し、ウィンドウ内でモジュールをドラッグする方法についての説明は終わりです。JavaScript を使用してマウス座標を取得し、ウィンドウ内でモジュールをドラッグする方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: