ブラウザの外とドラッグ＆ドロップでデータのやり取りするには
解説
別のタブの要素や別のウィンドウの要素、また、別のアプリケーションで選択したテキスト、デスクトップのファイルなどのドロップを受け付けることも可能です。
ドロップを受け付ける側での処理は、ファイル以外の場合は、同じページの中で自動でデータが格納されたケースと同様です。ドロップされた要素に対応するデータ種別を引数に指定して「getData(type)」を呼び出し、格納されたデータを取得します。
ファイルの場合は、eventオブジェクトのdataTransfer属性のfiles属性を参照します。複数ファイルのドラッグがサポートされているため、files属性はドロップされたファイルを表すFileオブジェクトの配列が格納されています。
ファイルの場合、types属性はnullになっているか、文字列"Files"が格納されており、「getData("Files")」は無効な値を返します。
以下の例ではファイルの属性を読み取っています。
// targetはドロップ先の要素、resultは結果を表示する領域
target.ondragover = function(event){
event.preventDefault();
}
target.ondrop = function(event){
var f = event.dataTransfer.files[0];
result.innerHTML = "ファイル名:" + f.name + " サイズ:" + f.size + " MIMEタイプ:" + f.type;
event.preventDefault();
}
ファイルの内容を読み取る方法などはFile APIを参照してください。なお、IEはFile APIを実装していないため、files属性も存在しません。
関連項目
