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のwhichコマンドの具体的な使い方

Linux でファイルを見つけたいのに、その場所がわからないことがよくあります。次のコマンドを使用し...

MySQLデータベースのリアルタイムバックアップの知識ポイントを詳しく解説

序文リアルタイムのデータベース バックアップの必要性は非常に一般的です。MySQL 自体はレプリケー...

アカウントとパスワードを記憶する機能を実現するVueの考え方とプロセス

目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...

Ubuntu 16.04 に Docker と nvidia-docker をインストールするための詳細なチュートリアル

目次DockerのインストールNvidia-docker のインストールDockerのインストール1...

XHTML CSS ページをプリンタ ページに変換する

以前は、Web ページのプリンタ対応バージョンを作成するには、印刷したときに見栄えがよくなるようにレ...

Eclipseを使用してMySQLデータベースに接続する方法を説明します

序文常にエラーが発生するため、MySQL データベースに接続するプロセスを記録します。接続プロセス1...

JS配列の一般的な方法とテクニックを学び、マスターになりましょう

目次splice() メソッドjoin() メソッド逆() メソッドevery() メソッド削減()...

Nexus をベースに Alibaba Cloud プロキシ ウェアハウスを構成するプロセスの分析

Nexus のデフォルトのリモートリポジトリは https://repo1.maven.org/ma...

要素 ui の el-table の列にさまざまなスタイルのデータを動的に実装する例

問題の説明Ele.me UI のフレームワークでは、入力データは el-form であり、出力データ...

MySQL で重複レコードを見つけて削除する方法

みなさんこんにちは。私は技術の話ばかりして髪を切らない先生のトニーです。何らかの歴史的な理由や誤操作...

HTMLフォームアプリケーションにはチェックボックスとラジオボタンの使用が含まれます

チェックボックスやラジオボタンの使用を含むコードをコピーコードは次のとおりです。 <!DOCT...

CSS3は光る境界線効果を実現します

操作効果: html <!-- この要素は表示されません。DOM は JavaScript に...

Nginx でファイル ホットリンク保護サービスを構築する方法を学ぶ例

序文多くのサイトが、ポイントやゴールドコインなど、情報のダウンロードに料金を請求していることは誰もが...