ファイルを選択するときにダイアログを使わずドラッグ&ドロップでできれば便利です。Webページ上に画像ファイルをドラッグアンドドロップしたらそれを表示させることができれば便利です。ページ内の要素をD&Dで移動させる方法はすぐに見つかったのですが、ファイルをD&Dしたときの情報は意外に公開されていなかったので、その方法を解説します。

HTML部分

まずHTML部分を示します。これはdiv要素とcanvas要素に画像ファイルをD&Dしたらこれを表示するだけの単純なものです。

要素に境界線と一定の幅、高さを持たせます。

style.css

JavaScript部分

JavaScript部分を示します。

画像ファイルを表示させる

まず通常のdiv要素にD&Dしたときの処理を示します。

マウスがドラッグされている間はデフォルトの動作はさせず、なにもしません。

app.js

ドロップされたらファイルがドロップされたかを調べます。

app.js

canvas要素に表示させる

canvas要素も同様にやってみることにします。

app.js

ドロップされたらドロップされたのはファイルかどうか調べ、ファイルの場合はcanvasのサイズを画像サイズと同じサイズに変更してからdrawImage関数で描画処理をおこないます。

app.js