以下は、ドラッグされるデータを登録する際の最適な方法についての解説です。
テキストのドラッグ
テキストをドラッグする時は、text/plain型を利用します。データはドラッグされる文字列です。例：
event.dataTransfer.setData("text/plain", "これはドラッグされるテキストです")
テキストボックスの中やWebページ中の選択範囲の文字列のドラッグ操作は自動的に処理されるため、あなたが自分で処理を書く必要はありません。
そのデータが代替テキストでは表現できない物である場合を除いて、他のデータ形式をサポートしないアプリケーションやドロップ対象のためのフォールバック用に、常にtext/plain型のデータを提供しておくことをおすすめします。そのために、データを追加する時には常に、最後にプレーンテキスト型のデータを登録しておいてください。
古いコードにおいて、text/unicodeやTextといった型の記述を見かけることがあるかもしれません。これらはどちらもtext/plainと等しく扱われ、プレーンテキスト型のデータとして登録・取得されます。
リンクのドラッグ
リンクは2つの型でデータを含むべきです。一つはtext/uri-list型として示されたURLで、もう一つはtext/plain型として示されたURLです。どちらの型も、リンク先のURLをデータとして使用するべきです。例：
var dt = event.dataTransfer;
dt.setData("text/uri-list", "https://www.mozilla.org");
dt.setData("text/plain", "https://www.mozilla.org");
多くの場合、text/plain型はtext/uri-list型に比べると正確さに欠ける物として、最後に登録されるべきです。
URL用の型はuri-listで、「L（URL）」ではなく「I（URI）」であることに注意してください。
複数のリンクをドラッグする場合、それぞれのリンクを改行で区切ることもできます。ナンバー記号（#）で始まる行はコメントで、有効なURLとしては扱われません。コメントは、リンクの目的を示したり、リンクに関連づけられたタイトルを保持したりする目的で利用できます。text/plain型で登録するフォールバック用のドラッグデータは、これと同様にすべてのリンク先URLを改行区切りで保持するべきですが、コメントは含めるべきではありません。
例：
https://www.mozilla.org #2つ目のリンク https://www.xulplanet.com
これは2つのリンクと1つのコメントを含むtext/uri-list型のデータの例です。
ドロップされたリンクを取得する時は、複数のリンクがドラッグされた場合や、コメントがデータの中に含まれる場合があることを想定するべきです。利便性を高めるために、text/uri-list型で提供されたデータの中から最初の有効なURLを参照するための特別な型として、「URL」型が利用できます。データを追加する時の型としては「URL」型を指定するべきではありません。もし「URL」型でデータを登録しようとした場合には、値は代わりにtext/uri-list型のデータとして登録されます。
var url = event.dataTransfer.getData("URL");
Mozilla特有の型として、text/x-moz-url型のデータを見かけることがあるかもしれません。この型が登場する場合は、順番ではtext/uri-list型よりも前に利用されるべきです。この型のデータは、リンクのURLに続いてリンクのタイトルが保持されており、それぞれが改行で区切られています。例：
https://www.mozilla.org Mozilla https://www.xulplanet.com XUL Planet
HTMLとXMLのドラッグ
HTMLの内容に対しては、text/html型を使用します。この型のデータはドラッグされるHTMLをシリアライズしたものであるべきです。具体的には、この型のデータとして登録されるのに適した値は、要素のinnerHTMLプロパティの値です。
XMLの内容に対してはtext/xml型を使用するべきですが、内容は整形式のXMLに変換しておくべきです。
あなたはtext/plain型として、HTMLまたはXMLのプレーンテキストでの表現を提供することもできます。その場合のデータは単純なテキストであるべきで、タグや属性などのソース文字列を含めるべきではありません。具体例：
var dt = event.dataTransfer;
dt.setData("text/html", "こんにちは、<strong>見知らぬ人</strong>");
dt.setData("text/plain", "こんにちは、見知らぬ人");
ファイルのドラッグ
ローカルのファイルはapplication/x-moz-file型で、nsIFileのオブジェクトとしてドラッグされます。特権を持っていないWebページでは、この型のデータを取得することも変更することもできません。ファイルは文字列にはできないため、データを登録するにはmozSetDataAtメソッドを使う必要があります。同様に、データを取得する時はmozGetDataAtメソッドを使わなくてはなりません。
event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);
もし可能なら、ファイルのURLをtext/uri-listおよびtext/plain型のデータとして提供することもできます。これらの型は最後に登録されるべきで、それによって、application/x-moz-file型は優先度の高い、より適切な型となります。
データトランスファーにおける複数の項目として、ドロップ時に複数のファイルを受け取ることがあります。詳細については複数の項目のドラッグ＆ドロップを参照してください。
以下の例は、ファイルのドロップを受け付ける領域の作り方を示しています：
<listbox ondragenter="return checkDrag(event)"
ondragover="return checkDrag(event)"
ondrop="doDrop(event)"/>
<script>
function checkDrag(event)
{
return event.dataTransfer.types.contains("application/x-moz-file");
}
function doDrop(event)
{
var file = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0);
if (file instanceof Components.interfaces.nsIFile)
event.currentTarget.appendItem(file.leafName);
}
</script>
この例では、イベントはデータトランスファーがapplication/x-moz-file型のデータを含んでいる時にのみfalseを返します。ドロップイベントの間、ファイル型として関連づけられたデータが取得され、ファイルのファイル名がリストボックスに追加されます。mozGetDataAtメソッドはnsISupports型でデータを返すので、nsIFile型のデータであることを確認してnsIFile型に変換するために、instanceof演算子を使っていることに注意してください。これは、誰かが間違ってファイルでない型のデータを登録してしまっている場合のためのチェックとしても有効です。
画像のドラッグ
画像の直接のドラッグは一般的には処理されません。そのため、MozillaはMacとLinux上では画像の直接のドラッグをサポートしていません。その代わり、画像は多くの場合、URLとしてドラッグされます。これには、他のURLリンクの場合と同様にtext/uri-list型を使用します。この場合のデータは、画像のURLか、画像がWeb上やディスク上に無い場合はdata URLにするべきです。data URLについてのより詳しい情報は、data URLスキームを参照してください。
他のリンクがそうであるように、text/plain型のデータもそれと同じURLを含んでいるべきです。とはいえ一般的には、data URLはテキスト型の内容として処理するには不向きですので、この場合についてのみtext/plain型のデータを登録しないようにしたいと考えることもあるでしょう。
Chrome権限あるいはそれ以外の特権を持ったコードでは、image/jpeg、image/png、image/gifといった画像型のデータを使うこともできます。この場合のデータはnsIInputStreamインターフェースを実装したオブジェクトで渡します。このストリームが読み込まれる時には、そのファイル形式での画像のデータビットを提供する必要があります。
また、画像がディスク上にある場合は、 application/x-moz-file型をデータ型の中に含めることもできます。実際に、これは画像ファイルがドラッグされた時に使われる一般的なやり方です。
最も適切なデータ形式からそうでない形式まで、正しい順番でデータを登録することが重要です。image/jpegのような画像型は最初に来るべきで、application/x-moz-file型がそれに続きます。その次にtext/uri-list型、最後にtext/plain型のデータを登録することになります。例：
var dt = event.dataTransfer;
dt.mozSetDataAt("image/png", stream, 0);
dt.mozSetDataAt("application/x-moz-file", file, 0);
dt.setData("text/uri-list", imageurl);
dt.setData("text/plain", imageurl);
文字列でないデータの登録にはmozGetDataAtメソッドを使うことに注意してください。場合によっては、これらのうちいくつかの型だけが利用可能となりますので、ドロップされた画像を受け取る時には、どの形式が利用可能であるかを確認することが大事です。
ノードのドラッグ
文書中のノードや要素は、application/x-moz-node型のデータとしてドラッグすることができます。この型のデータはDOMノードであるべきです。これによって、ドロップ対象はドラッグが開始された実際のノードを正確に受け取ることができるようになります。異なるドメインのスクリプトからデータを取得しようとした場合は、ドロップが行われた後であっても、ノードにはアクセスできないことに注意してください。
あなたは常に、ノードの内容をプレーンテキスト型の代替文字列で提供するべきです。
独自のデータのドラッグ
独自の目的のために、あなたは独自の型を使うこともできます。そのデータが特定のWebサイトやアプリケーション専用のものである場合以外は、プレーンテキスト型の代替文字列を提供するように常に努めてください。代替テキストを用意しなかった場合は、他の場所にはドロップできなくなります。