この記事では、フリーウィンドウのマウス制御を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: CentOS 6.8 での Hadoop 3.1.1 完全分散インストール ガイド (推奨)
1. 問題Windows 上の Eclipse を使用して開発されたプロジェクトは Windows ...
MySQL テーブルのテーブル構造をすばやく変更する - 「MySQL 管理」から抜粋 ALTER ...
RocketMQ は、Alibaba が設計した分散型のキューベースのメッセージング ミドルウェア...
MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...
目次序文ブラウザコンパイル版ローカルプリコンパイルバージョン要約する序文vue3サンドボックスには主...
上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...
Linux では、通常、ファイルの名前を変更するために mv コマンドを使用します。これは、単一のフ...
バージョン間でのコマンドの違い: innodb ステータスを表示\G mysql-5.1 エンジン ...
インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...
今日は、企業の実際の本番環境でよく遭遇する、Nginx を新しいバージョンにアップグレードし、古いバ...
フォーム内の読み取り専用および無効な属性1. 読み取り専用:サーバーは、ユーザーがデータを変更するこ...
目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...
序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...
目次1. tomcatの起源1. Tomcat アプリケーションのシナリオ2. Tomcatに必要な...
<table>テーブルデータをJSON形式に変換するJavaScript関数は次のとおり...