【Javascript】webページでドラッグできるダイアログを作ってみた

完成物

『Dialog』をドラッグして、動かしてみてください。
右上のCODEPENのアイコンを押すと、コードが見やすくなりいます。

See the Pen qiita_draggableDialog by matsuura77 (@matsuura77) on CodePen.

作ろうと思ったきっかけ

chrome拡張で簡易なタイマーを作成したかったからです。
その際に、自由に配置できて、ウィンドウの外に出ないようなダイアログが欲しかったからです。

ダイアログについて

大元の実装はこちら。
上記の記事で大まかなドラッグの実装ができます。
今回はそれに加え、ウィンドウの外にダイアログが出ないように実装しました。