HTML * css * javascript 画面全体でファイルがドロップできるようにする

見えないdivで全体を覆ってそこにイベントを付与する

---

動作サンプル

---

See the Pen FileDragAndDrop by ninomae-makoto (@ninomae-makoto) on CodePen.

result画面内にファイルをドラッグ＆ドロップするとファイル名が表示される。

---

解説

---

まず以下のように画面全体を覆うようなcssを用意する。

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* display: none; */
}

上記のcssを用意してidをoverlayにしたdivタグをHTML内の何処か（どこでもいい）に配置すれば画面全体を覆うことができる。
後はこのdivに"dragover"、"dragleave"、"drop"イベントを付与すればよし。
ドロップされたファイルだけ取得できればいい場合は"drop"イベントのみで事足りる。