https://am1tanaka.hatenablog.com/entry/2015/02/11/172820

ドラッグイベント
- ドラッグ要素とドロップ領域それぞれに必要なイベントハンドラを実装することで操作できるようになる
- ドラッグ要素に対して設定できるイベントハンドラ
  - dragstart / drag / dragend
- ドロップ領域に対して設定できるイベントハンドラ
  - dragenter / dragover / dragleave / drop
- これらのイベントはマウスイベントのインターフェースを継承しているため、ドラッグ中の位置を確認できる
- DataTransferでデータの受け渡しやUIの表示更新を実装する
- Drag Drop APIのデフォルトの挙動で、ドラッグ要素にキャプチャ画像がマウスに合わせて移動し、ドラッグ操作中のページスクロール処理もやるので、そのまま利用しても十分機能する
DataTransfer
- p359 全てのドラッグイベントのイベントオブジェクトには、dataTransferプロパティが付加されている
- データの受け渡し、データの処理方法の指定、ドラッグイメージの設定を行う
- インターフェース一覧

ドラッグ要素の設定
- p360 ドラッグ可能にするには、その要素のdraggable属性をtrueにする
- true,false,autoを設定できる。autoはデフォルト値で、imgやaはtrue
ドラッグ側の設定では、setDataでMIME Typeとデータを設定する。複数のデータを設定可能
p361 ドロップ側の設定では、event.preventDefault()でブラウザのデフォルト挙動をキャンセルした上で、getDataで指定のMIME Typeの要素を取り出す

p362 ドラッグイメージの変更方法
p363 CSSを利用したドラッグイメージのカスタマイズは、書籍の時代は、-webkit-dragでのみ可能
ドロップ領域の強調表示は、dragover中の要素の背景色を変えるなど
- エフェクトの追加はdragenterイベント内
- p364 ドロップの位置やタイミングによってアクションが変わる場合はdragoverイベントでアクションを説明する
- エフェクトの削除はdragleaveイベントとdropイベント

デスクトップのファイルを取得する
- dataTransferのfilesプロパティを利用
- p365 files.lengthが0の時はファイルはドロップされていない
- filesにはFileオブジェクトが配列で入っている
ファイルをデスクトップに保存する
- 書籍の時点ではGoogle Chromeのみ対応
- event.dataTransfer.setData('DownloadURL','MIMETYPE:ファイル名:ファイルURL') で保存

p367 JavaScriptからローカルにあるファイルを読み込むためのAPI
ファイルの書き込み(File API:Writer)とディレクトリ構造の管理(File API:Directories and System)が書籍の時点で仕様の策定中

p373 dataURLとは、readAsDataURLメソッドに関連して、data:スキームで始まるURLのこと
データをURLに全て埋め込んだ形式
通常のURLと同様に使えるため、細かい画像を埋め込んでおくなどすることで、サーバへのアクセスを減らせる
dataURLの生成
- data:[][;base64], の形式
- 画像のようなバイナリを扱う場合、まずはbase64 エンコードをしてURLとして利用出来る文字列に変換する
- [;base64]を省略すると、データにはURLエンコードしたASCII文字列を指定
- URLエンコードにはencodeURIComponent関数、Base64 エンコードにはbtoa関数を利用
- データの生成例
readAsDataURLメソッド
- p374 FileReaderのメソッド。data URL形式で読み込む
- p375 readAsDataURLで読み込んだバイナリデータは文字列なので、localStorageなどにそのまま保存可能

イメージのdraggableをfalseにして、動かせないようにする

データを受け取れるタイミング以外でファイルがドロップされた際に、ページ以降が発生しないようにevent.preventEvent()でブラウザ処理をキャンセル