JavaScript は自由に移動するウィンドウのマウス制御を実装します

JavaScript は自由に移動するウィンドウのマウス制御を実装します

この記事では、フリーウィンドウのマウス制御を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

コード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>マウスでウィンドウを移動しました</title>
    <スタイル>
        .mainDiv {
            幅: 350ピクセル;
            高さ: 200px;
            境界線: 2px 黒実線;
            位置: 絶対;
        }

        .titleDiv {
            幅: 350ピクセル;
            高さ: 30px;
            背景色: 黄緑;
            テキスト配置: 中央;
            行の高さ: 30px;
        }

        .contentDiv {
            幅: 350ピクセル;
            高さ: 170ピクセル;
            背景色: SandyBrown ;
            テキスト配置: 中央;
        }
    </スタイル>
</head>
<本文>
<!--onmousedown: マウス ボタンが押されたときにイベントが発生します。onmousemove: マウス ポインターが指定されたオブジェクトに移動したときにイベントが発生します -->
<div class="mainDiv" id="mainDiv" style="上: 20px;左: 20px">
    <div class="titleDiv" id="titleDiv" onmousedown="mouseDown()" onmouseup="mouseUp()">
        タイトルバー</div>
    <div class="contentDiv">
        《マウスで操作できるフリーウィンドウ》<br>
        注意: MainDiv は、位置が絶対位置に設定されるまで移動できません</div>
</div>
<スクリプト>
    var dx;
    var dy;
    var mainDivObj = null;
    var titleDivObj = null;

    /**
     * マウス押下関数、マウスが押されたときにこの関数を実行します*/
    関数mouseDown() {
        //マウスボタンの値を取得します。0 はマウスの左ボタン、1 はマウスのスクロールボタン、2 はマウスの右ボタンです。if (event.button == 0) {
            mainDivObj = document.getElementById("mainDiv");
            titleDivObj = document.getElementById("titleDiv");
            //マウス スタイルを設定します titleDivObj.style.cursor = "move";
            //メイン div の影のスタイルを設定します mainDivObj.style.boxShadow = "0px 0px 10px #000";
            //マウスの現在の座標を取得します。let x = event.x;
            y = event.y とします。
            dx = x - parseInt(mainDivObj.style.left);
            dy = y - parseInt(mainDivObj.style.top);

        }
    }

    //マウスが移動したときに呼び出します document.onmousemove = mouseMove;

    /**
     * マウスを押すと関数が移動します。マウスが移動すると、divを移動する関数が実行されます。
     */
    関数mouseMove() {
        mainDivObj != null の場合 {
            //現在のマウスの動きの座標位置を取得します。let x = event.x; //マウスの動きの x 軸座標 let y = event.y; //マウスの動きの y 軸座標 //移動後の div の左と上との距離を計算します //現在の座標を使用して、div 内のマウスの位置と div の左と上との距離を減算します。let left = x - dx;
            top = y - dyとします。
            //div の新しい座標位置を設定します。mainDivObj.style.left = left + "px";
            mainDivObj.style.top = top + "px";
        }
    }
    /**
     * マウスリリース関数、マウスがリリースされたときにこの関数が実行されます*/
    関数 mouseUp() {
        mainDivObj != null の場合 {
            dx = null;
            dy = null;
            //div の影のスタイルを設定します mainDivObj.style.boxShadow="none";
            mainDivObj = null;
            titleDivObj.style.cursor="ポインター";
            titleDivObj = null;
        }
    }
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • C言語で4ウィンドウチャットを実装する
  • Javaスライディングウィンドウ最大値の実装
  • C# は QQ チャット ウィンドウを模倣します
  • 可視化ツール PyVista マルチスレッドによる複数ウィンドウの表示のサンプルコード
  • Pyqt5はウィンドウのスケーリングとウィンドウ内のコントロールの自動スケーリングを実装します
  • Android ウィジェットの基本コーディング例
  • Python クローラー用の Selenium マルチウィンドウ切り替えの実装
  • Javaウィンドウの詳細かつ包括的な説明

<<:  MySQL 自動インクリメント ID 枯渇の例

>>:  CentOS 6.8 での Hadoop 3.1.1 完全分散インストール ガイド (推奨)

推薦する

Linux 上の Tomcat で MySQL にデータを挿入するときに中国語の文字化けが発生する問題を解決する

1. 問題Windows 上の Eclipse を使用して開発されたプロジェクトは Windows ...

MySQLテーブルのテーブル構造を素早く変更する方法

MySQL テーブルのテーブル構造をすばやく変更する - 「MySQL 管理」から抜粋 ALTER ...

Docker インストール rocketMQ チュートリアル (最も詳細)

RocketMQ は、Alibaba が設計した分散型のキューベースのメッセージング ミドルウェア...

MySQL パフォーマンス最適化のヒント

MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...

Vue3のサンドボックスの仕組みの詳しい説明

目次序文ブラウザコンパイル版ローカルプリコンパイルバージョン要約する序文vue3サンドボックスには主...

HTML テーブル境界コントロールの詳細な説明

上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...

Linux で複数のファイルの名前を一括で変更する方法

Linux では、通常、ファイルの名前を変更するために mv コマンドを使用します。これは、単一のフ...

MySQL 4.1/5.0/5.1/5.5/5.6の主な違い

バージョン間でのコマンドの違い: innodb ステータスを表示\G mysql-5.1 エンジン ...

ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験(グラフィックチュートリアル)

インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...

1 分で Nginx のバージョンをスムーズにアップグレードおよびロールバックする方法

今日は、企業の実際の本番環境でよく遭遇する、Nginx を新しいバージョンにアップグレードし、古いバ...

フォームの読み取り専用属性と無効な属性についての簡単な説明

フォーム内の読み取り専用および無効な属性1. 読み取り専用:サーバーは、ユーザーがデータを変更するこ...

面接官がmysqlのcharとvarcharの違いを尋ねたとき

目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...

SQL 最適化チュートリアル: IN クエリと RANGE クエリ

序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...

Centos 7 システムの Tomcat サーバーの詳細な分析

目次1. tomcatの起源1. Tomcat アプリケーションのシナリオ2. Tomcatに必要な...

HTML テーブル データを Json 形式に変換するサンプル コード

<table>テーブルデータをJSON形式に変換するJavaScript関数は次のとおり...