Firefox 3.6でファイルをドラッグ＆ドロップする方法

Firefox web browser - Faster, more secure & customizable

hacks.mozilla.orgにおいてfile drag and drop in Firefox 3.6のタイトルのもと、Firefox 3.6でファイルのドラッグ＆ドロップと複数ファイルの選択を処理する方法が紹介されている。ドラッグ＆ドロップ対象のデータを扱うDataTransferはFiorefox 3.0 (Gecko 1.9)で、ドラッグ＆ドロップのイベントはFirefox 3.5 (Gecko 1.9.1)で、非同期のファイル読み込みはFirefox 3.6 (Gecko 1.9.2)で実装されている。これらを組み合わせて処理する方法が簡単に説明されている。なお、複数ファイルを選択する方法は同じくhacks.mozilla.orgにおいてサンプルコードが紹介されている。

ドラッグ&ドロップイベント	対象	内容
dragenter	ドラッグを受ける側	ドラッグされている要素がエリアに入ってきたとき
dragover	ドラッグを受ける側	ドラッグされている要素がエリアのなかにあるとき
dragleave	ドラッグを受ける側	ドラッグされている要素がエリアからでていったとき
drop	ドラッグを受ける側	ドロップされたとき
dragstart	ドラッグされる側	ドラッグが開始されたとき
drag	ドラッグされる側	ドラッグ中
dragend	ドラッグされる側	ドラッグが終了したとき

こうした機能を組み合わせることで、複数ファイルや要素をドラッグ＆ドロップでFirefox 3.6で処理することができるようになる。file drag and drop in Firefox 3.6で紹介されているデモンストレーションから、特にドラッグ＆ドロップと複数ファイルの処理に的を絞ったデモ用HTMLを次に掲載する。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firefox 3.6 ファイルドラッグ&ドロップデモンストレーション</title>
<style type="text/css">
body {
    width: 600px;
}
#area_DandD {
    background: #efefef;
    border: 1px solid #333;
    margin: 10px 10px 10px 10px;
    padding: 0px 10px 0px 10px;
    min-height: 300px;
}
</style>
<script type="text/javascript">
//<![CDATA[
var area_DandD;
var area_status;


function init()
{
    area_status = document.getElementById("area_status");
    area_DandD = document.getElementById("area_DandD");
    area_DandD.addEventListener("dragenter", dragenterEventProcess, true);
    area_DandD.addEventListener("dragover", dragoverEventProcess, true);
    area_DandD.addEventListener("dragleave", dragleaveEventProcess, true);
    area_DandD.addEventListener("drop", dropEventProcess, true);
}


function dragenterEventProcess(event)
{
    area_status.innerHTML = "drag entered";
}


function dragoverEventProcess(event)
{
    event.preventDefault();
    area_status.innerHTML = "now dragging...";
}


function dragleaveEventProcess(event)
{
    area_status.innerHTML = "drag leaved";
}


function dropEventProcess(event)
{
    event.preventDefault();
    var files = event.dataTransfer.files;


    var buffer = "You've just dropped " + files.length + " files.<hr />";
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        buffer += "ファイル名: " + file.name + "<br />";
        buffer += "タイプ: " + file.type + "<br />";
        buffer += "URN: " + file.urn + "<hr />";
    }


    area_status.innerHTML = buffer;
}


window.addEventListener("load", init, true);
//]]>
</script>
</head>
<body>
<div id="area_DandD">
  <p id="area_status"></p>
</div>
</body>
</html>

ドラッグ&ドロップで渡すファイルを用意 - Ubuntu 9.10 Deskop (32bit)

サンプルはFirefox 3.6 beta 5など3.6系のFirefoxで試すことができる。OSの提供しているファイルマネージャを使ってファイルを選択し、Firefox 3.6で表示させた灰色のエリアにドラッグすると「now dragging...」というテキストが表示される。エリアからはずれると「drag leaved」となり、ふたたびエリアに入れば「now dragging...」が表示される。ファイルをドロップすると「You've just dropped 数 files.」というメッセージのあとに、それぞれのファイル名とタイプ、URNがリストで表示される。