HTML5で便利になった機能の一つにファイルのドラッグ&ドロップがあります。Webブラウザ上にファイルをドロップしてアップロードしたり、DOMをドラッグ&ドロップできたりします。しかしできるとは言ってもコードをそれなりに書かないと使えないのが難点です。 そこで使ってみたいのがdrag-dropです。HTML5のドラッグ&ドロップを手軽に実装できるようにします。

drag-dropの使い方

drag-dropのコードです。onDrop/onDropTextメソッドを定義するだけでファイルやテキストデータが取得できます。

window.remove = DragDrop('body', {
  onDrop: function (files, pos) {
    var names = files.map(function (file) { return file.name })
    window.alert('onDrop fired! ' + files.length + ' files: ' + names.join(', '))
    window.files = files
    console.log('onDrop', files)
    console.log('Dropped at coordinates', pos.x, pos.y)
  },
  onDropText: function (text, pos) {
    window.alert('onDropText fired! ' + text)
    window.text = text
    console.log('onDropText', text)
    console.log('Dropped at coordinates', pos.x, pos.y)
  }
})

使っている例です。ファイルをドロップしようとすると赤い枠が表示されます。

そしてアラートにドロップしたファイル数と名前が表示されます。

テキストも同様に取得できます。

これだけ簡単なコードで実装できればファイルのドラッグ&ドロップAPIを使ってみたいと思うのではないでしょうか。複雑な部分をラッピングしてくれると、余計な学習コストがかからずに機能実現に辿り着けるはずです。

drag-dropはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

feross/drag-drop: HTML5 drag & drop for humans