モーダルウィンドウの様々な側面を学んできたね！情報を整理して見せたり、ユーザーに操作を促したりと、モーダルはとっても便利だ。
でも、時々「モーダルが邪魔で、後ろにあるページの内容を見ながら操作したいな…」なんて思うことはないかな？そんな時、モーダルウィンドウ自体をマウスで掴んで好きな場所に移動できたら、すごく便利だよね！
このページでは、そんな「ドラッグ可能なモーダルウィンドウ」をJavaScriptで作る方法をマスターしていくよ。マウス操作のイベントを巧みに使って、モーダルをもっと使いやすくしてみよう！
要素をドラッグして動かす、というのは、実は3つの基本的なマウスイベントを連携させることで実現できるんだ。
mousedown (マウスダウン):
マウスのボタンが、動かしたい要素（ここではモーダルのヘッダーなど、掴む部分）の上で押された瞬間に発生する。「ドラッグ開始！」の合図だね。
mousemove (マウスムーブ):
マウスカーソルが動いている間、連続して発生する。mousedownされた後、このイベントを使って要素の位置をマウスに合わせて更新していくんだ。「ドラッグ中！」の状態。
mouseup (マウスアップ):
押されていたマウスのボタンが離された瞬間に発生する。「ドラッグ終了！」の合図。ここで後始末をするよ。
この3つのイベントの流れをプログラムで制御することで、スムーズなドラッグ操作が作れるんだ。
さあ、実際にドラッグできるモーダルを作っていく手順を見てみよう。
モーダルウィンドウのHTML構造は、これまで作ってきたものと基本的には同じだよ。ただ、ユーザーがどこを掴んでドラッグするか、その「ドラッグハンドル」となる部分を明確にしておくと良い。通常はモーダルのヘッダー部分 (.modal-header) がその役割を担うことが多いね。
モーダルコンテンツ (.modal-content) は、CSSでposition: fixed; (またはposition: absolute;) になっている必要があるよ。これによって、JavaScriptでtopとleftのスタイルを直接変更して位置を動かせるようになるんだ。
ドラッグハンドルとなる要素 (.modal-header) のCSSに、cursor: move; を指定しておこう。これで、マウスカーソルがその上に乗ると、移動できることを示す矢印の形（十字の矢印など）に変わるよ。
.modal-header {
cursor: move;
/* 他のスタイル（背景色、パディングなど） */
}
.modal-content {
position: fixed; /* または absolute */
/* 初期位置はJSで設定することも、CSSで設定することも可能 */
}ここが一番のキモだ！3つのマウスイベントを使って、ドラッグのロジックを組み立てるよ。
mousedown イベント (ドラッグ開始)モーダルのヘッダー (ドラッグハンドル) でmousedownイベントが発生したら、以下の処理を行う。
isDragging = true;) を立てる。event.clientX, event.clientY) を記録する。modalElement.offsetLeft, modalElement.offsetTop) も記録する。offsetX = event.clientX - modalElement.offsetLeft;)。これがないと、ドラッグ開始時にモーダルの左上がマウスカーソルに吸い付いてしまうんだ。mousemoveとmouseupのイベントリスナーを、document (または window) に対して登録する。これは、マウスがモーダルヘッダーの外に出てもドラッグ操作を続けられるようにするためだよ。mousemove イベント (ドラッグ中)document上でmousemoveイベントが発生したら（つまりマウスが動いたら）、以下の処理を行う。
isDragging フラグがtrue（ドラッグ中）かどうかを確認する。ドラッグ中でなければ何もしない。event.clientX, event.clientY) を取得する。newLeft = event.clientX - offsetX;)。style.leftとstyle.topにピクセル単位で設定して、モーダルを動かす。mouseup イベント (ドラッグ終了)document上でmouseupイベントが発生したら（つまりマウスボタンが離されたら）、以下の処理を行う。
isDragging フラグをfalseに戻す。documentに登録したmousemoveとmouseupのイベントリスナーを解除 (removeEventListener) する。これを忘れると、ドラッグが終わった後も無駄な処理が動き続けたり、意図しないタイミングでモーダルが動いたりする原因になるから、必ず解除しよう！さあ、実際にドラッグできるモーダルを体験してみよう！下のボタンでモーダルを開いて、モーダルの上の濃い灰色のヘッダー部分を掴んでドラッグしてみてね。
マウス操作や位置に関する言葉を学ぼう！
意味：ドラッグ可能な、引きずることができる
Original: We are implementing a draggable interface element for better user experience.
意訳：より良いユーザー体験のために、ドラッグ可能なインターフェース要素を実装しています。
意味：マウスイベント（例: mousedown, mousemove, mouseup, click, dblclickなど）
Original: JavaScript allows us to respond to various mouse events to create interactive features.
意訳：JavaScriptを使用すると、さまざまなマウスイベントに応答してインタラクティブな機能を作成できます。
意味：オフセット、ずれ、差引
Original: To drag an element correctly, you need to calculate the mouse offset from the element's corner.
意訳：要素を正しくドラッグするには、要素の角からのマウスのオフセットを計算する必要があります。
意味：座標系（位置を表すための基準となるシステム。例: X座標、Y座標）
Original: Web browsers use a coordinate system where the top-left corner is (0,0).
意訳：ウェブブラウザは、左上隅が(0,0)となる座標系を使用します。
意味：イベントリスナーのスコープ（イベントリスナーがどの要素や範囲で有効か）
Original: For dragging, 'mousemove' and 'mouseup' listeners are often attached to the document to capture events outside the dragged element.
意訳：ドラッグ操作では、「mousemove」および「mouseup」リスナーは、ドラッグされる要素の外部のイベントをキャプチャするために、しばしばドキュメントにアタッチされます。
今回は、JavaScriptのマウスイベントを使って、モーダルウィンドウをドラッグ可能にする方法を学んだね！
mousedown, mousemove, mouseup の3つのイベントを連携させるのが基本。mousemove と mouseup のリスナーは、ドラッグ中だけ document に登録し、終わったら必ず解除する！cursor: move; を指定すると、ユーザーに分かりやすくなる。これで、君の作るモーダルウィンドウは、さらにユーザーフレンドリーで高機能になったはずだ。色々な要素に応用できるテクニックだから、ぜひマスターしてね！
さて、モーダルウィンドウに関する機能もだいぶ揃ってきたね。次のページでは、モーダルウィンドウを作る上で絶対に忘れてはいけない「アクセシビリティ」について、もう一度しっかり考えてみよう。