JavaScript: マウスイベント: div をドラッグ操作で移動する (2)

・マウス操作で div のパネルをドラッグ移動するサンプル。
  タイトルの領域をクリックしてドラッグする。
・MouseDrag2022.js を使用。
タイトル
タイトル領域をドラッグする。

右下に div の大きさをマウスで変更できる領域がある。 
(2015/04-2023/12)
動作     : Edge120, Firefox120, Chrome119

◎ いろいろ

・div パネルの右下にマウスでサイズ変更できる領域があります。
  CSS resize: both; で設定する。
  Chrome, Chromium Edge, Firefox で動作。

・mouseout したときの細かい処理がありません。

◎ 2020/11

・マウスドラッグに反応する領域は、タイトル部分よりも大きな領域を
　確保することが必要です。上のサンプルには入っていません。

  タイトル領域からマウスがはずれると、ドラッグ動作が止まる。
  そのままだと使いにくい。

  タイトルに見えない大きな div をつけ、こちらをドラッグに反応
　にする領域にする。
inserted by FC2 system