UIを移動したい
ここまでHTML/CSS/DOMのAPIを使うと画面（UI）が作れることがわかった。
作ったUIは同じ位置に居座っていて、スマホのアプリのように全画面を利用するなら問題にならないけど、別のUIを作ったとたんに「移動したい」と思い始める。
UIの移動に必要な要件を考えてみる
たとえば、こんなUIを考えてみる。
■UIイメージ
※全て、HTML/CSS/DOM APIで作っています。
「UIを移動する」というのは、「表示開始座標」を「なんとかして更新」できたらいいことになる。
ここでは、
・UIイメージの「＊」を「つかんで」
・つかんでいる間
・表示開始座標を更新
を実装することを考えてみる。
タグの構成
操作対象のタグを「BUTTON」タグとして用意する。こんな感じ。
<!--ダイアログコンテナ-->
<div id="charListArea" class="charListArea">
<!--移動するときの操作対象タグ-->
<div class="char-dlg-dlg-title-00">
<button class="char-dlg-dlg-tool-b0" id="char-dlg-dlg-tool-b0" title="DragMove">[＊]</button>
</div>
<!--ダイアログ-->
<dialog id="char-dlg" class="char-dlg">
<!--ダイアログ内容-->
<div class="char-dlg-content" id="char-dlg-content">
...
</div>
</dialog>
</div>
この例では「char-dlg-dlg-tool-b0」を「タップ（クリック）」したときに、UIを移動することにする。
UI移動の実装
実は、Geminiに「UIを移動したい」と質問をなげると簡単に教えてくれる。
イベントハンドラの利用
以下のイベントハンドラを利用する。
| ハンドラ | イベント発生要因 |
|---|---|
| onpointerdown | タップ（クリック）したときに通知 |
| onpointermove | タグの内部をポインタが移動しているとき通知 |
| onpointerup | タップ（クリック）を終了したときに通知 |
※タップ（クリック）を終了したとき・・・手動操作を終了したとき。
それぞれのタイミングにおいて、適切な処理を実装する。
イベントハンドラでの処理
各イベントハンドラで、移動開始・移動中・移動終了、の処理を実装する。
| ハンドラ | イベント処理 |
|---|---|
| onpointerdown | elem.setPointerCapture(e.pointerId) |
| onpointermove | 移動量を計算し、UIの表示位置を更新 |
| onpointerup | elem.releasePointerCapture(e.pointerId) |
※elem：タップ（クリック）したタグのElement
※e.pointerId：イベントに通知される値
※setPointerCapture：移動系イベントを指定Elementのみに通知するようにする。
※releasePointerCapture：setPointerCaptureを解除。
次回は、UI座標の保存と復帰
せっかく、UI移動できるようなったけど、ブラウザを開くたびに初期状態にもどってしまうのは、orz。
ブラウザ内に値を保存するしくみを聞いてみると、いろいろあるらしいけど、JsStoreというパッケージをつかってみることした。