ここでは、ファイルを Drop すると drop イベントとして「dropped.」と、利用したファイル名を表示。
<html>
<head>
<title>Drag & Drop test.</title>
<script type="text/javascript">
window.addEventListener('dragover', function(event) {
event.preventDefault();
}, false);
window.addEventListener('dragenter', function(event) {
event.preventDefault();
}, false);
window.addEventListener('drop', function(event) {
event.preventDefault();
alert('dropped.');
var file = event.dataTransfer.files[0];
if (file) {
alert('file = ' + file.name);
}
}, false);
</script>
</head>
<body>
<div>Drop a file.</div>
<br />
<div>If you use safari on windows, drop a unders dummy link first, and drop a file next.</div>
<div>
<a href="#">a dummy link.</a>
</div>
</body>
</html>
Firefox, Chrome, Safari で動作することを想定しているけども、Windows 版 Safari ではファイルを Drop することができない。
しかし、同じページ内にあるリンク (もしくは画像があればそれでも OK) を掴んでページ内へ Drop すると Drop イベントが発生し、さらに何故か以降のファイル Drop が成功するようになる。
実際にその動きが確認できるページはこちら。
http://hatotech.org/labo/drop.html
ちなみにこの現象は他の「ファイル Drop 機能を提供しているページ」でも見ることができる。例えば Google Docs。
何が起きてるんですかね。ブラウザと Javascript に詳しい人教えてください。
