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がリストで表示される。

ドラッグ&ドロップする前 - Firefox 3.6 beta 5

ドラッグ&ドロップした後 - Firefox 3.6 beta 5

なお、こうした機能はFirefox 3.6の正式版やまたは将来のバージョンで変更されたりサポートされなくなる可能性もある。