15章 デスクトップ連携
Drag Drop API
Drag Drop APIとは
- p358 DataTransferは、ドラッグ操作でブラウザとデスクトップ上のファイルのやりとりができる
インターフェース
- ドラッグイベント
- ドラッグ要素とドロップ領域それぞれに必要なイベントハンドラを実装することで操作できるようになる
- ドラッグ要素に対して設定できるイベントハンドラ
- dragstart / drag / dragend
- ドロップ領域に対して設定できるイベントハンドラ
- dragenter / dragover / dragleave / drop
- これらのイベントはマウスイベントのインターフェースを継承しているため、ドラッグ中の位置を確認できる
- DataTransferでデータの受け渡しやUIの表示更新を実装する
- Drag Drop APIのデフォルトの挙動で、ドラッグ要素にキャプチャ画像がマウスに合わせて移動し、ドラッグ操作中のページスクロール処理もやるので、そのまま利用しても十分機能する
- DataTransfer
- p359 全てのドラッグイベントのイベントオブジェクトには、dataTransferプロパティが付加されている
- データの受け渡し、データの処理方法の指定、ドラッグイメージの設定を行う
- インターフェース一覧
基本的なドラッグ＆ドロップ
表示のカスタマイズ
ファイルのDrag-In / Drag-Out
- デスクトップのファイルを取得する
- dataTransferのfilesプロパティを利用
- p365 files.lengthが0の時はファイルはドロップされていない
- filesにはFileオブジェクトが配列で入っている
- ファイルをデスクトップに保存する
- 書籍の時点ではGoogle Chromeのみ対応
- event.dataTransfer.setData('DownloadURL','MIMETYPE:ファイル名:ファイルURL') で保存
DataTransferItemList
- p366 書籍の時点では、itemsによるデータの受け渡しが推奨されているが、ブラウザの実装が追いついていなかった
File API
File APIとは
- p367 JavaScriptからローカルにあるファイルを読み込むためのAPI
- ファイルの書き込み(File API:Writer)とディレクトリ構造の管理(File API:Directories and System)が書籍の時点で仕様の策定中
