type_html/css_WEB-ITnose をドラッグ

テキストをドラッグ EDIT

テキストをドラッグする場合は、テキスト/プレーンタイプを使用します。データはドラッグされた文字列である必要があります。例:

event.dataTransfer.setData("text/plain", "This is text to drag")

Web ページ上のテキスト ボックス内のテキストと選択したテキストのドラッグは自動的に行われるため、自分で行う必要はありません。

オプションの論理テキストがない場合を除き、他の型をサポートしていないアプリケーションまたは配信ターゲットのフォールバックとして、常にテキスト/プレーン型データを追加することをお勧めします。プレーン テキスト タイプは最も具体性が低いため、常に最後に追加します。

古いコードでは、text/unicode または Text タイプが発生する可能性があります。これらは text/plain 型に相当し、すべての平文データが格納および取得されます。

リンクをドラッグ 編集

リンクには 2 種類のデータが含まれている必要があります。1 つ目はテキスト/uri-list タイプの URL、2 つ目はテキスト/プレーン タイプの URL です。どちらのタイプも、リンクの URL である同じデータを使用します。例:

var dt = event.dataTransfer;dt.setData("text/uri-list", "http://www.mozilla.org");dt.setData("text/plain", "http://www.mozilla.org");

前と同様に、uri タイプほど具体的ではないため、最後に text/plain タイプを追加します。

URL タイプは uri-list であり、「uri」には「l」ではなく「i」が含まれることに注意してください。

複数のリンクをドラッグする場合、改行を使用して各リンクを区切ることができます。ポンド記号 (#) で始まる行はコメントであり、正当な URL とみなされるべきではありません。コメントを使用して、リンクの意味を示したり、リンクに関連付けられたタイトルを保存したりできます。データのテキスト/プレーン バージョンにはすべてのリンクが含まれている必要がありますが、コメントは含まれていません。

例:

http://www.mozilla.org#A second linkhttp://www.xulplanet.com

このテキスト/uri-list データの例には 2 つのリンクと 1 つのコメントが含まれています。

ドラッグ アンド ドロップ リンクを取得するときは、複数のリンクとコメントを含むデータを処理できることを確認する必要があります。便宜上、特別なタイプの URL を使用して、text/uri-list タイプのデータ内の最初の正当なリンクを取得できます (注釈: Chrome は text/uri-list の完全なデータを取得します)。データを追加するために URL タイプを使用しないでください。これは、データの text/uri-list タイプを設定するだけです。

var url = event.dataTransfer.getData("URL");

Mozilla のカスタム text/x-moz-url タイプを使用することもできます。使用する場合は、text/uri-list タイプの前に追加する必要があります。リンクの URL に続いて、改行のみで区切られたリンクのタイトルが保存されます。例:

http://www.mozilla.orgMozillahttp://www.xulplanet.comXUL Planet

HTML と XML をドラッグ 編集

HTML コンテンツでは text/html タイプを使用できます。このタイプのデータは HTML でシリアル化する必要があります。たとえば、要素の innerHTML プロパティの値を使用してこのタイプの値を設定することが適切です。

XML コンテンツでは text/xml タイプを使用できますが、データ値が整形式の XML であることを確認する必要があります。

text/plain タイプを使用して、HTML または XML にプレーン テキストを含めることもできます。データにはテキスト コンテンツのみが含まれ、ソース タグや属性は含まれない必要があります。例:

var dt = event.dataTransfer;dt.setData("text/html", "Hello there, <strong>stranger</strong>");dt.setData("text/plain", "Hello there, stranger");

ファイルのドラッグ EDIT

ローカル ファイルは、nsIFile オブジェクトであるデータ値を持つ application/x-moz-filetype を使用してドラッグされます。このタイプのデータは取得または変更できません。ファイルは文字列ではないため、データを割り当てるには mozGetDataAt メソッドを使用する必要があります。

event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);

可能であれば、text/uri-list と text/plaintypes の両方を使用してファイルの URL を含めることもできます。これにより、より具体的な application/x-moz-filetype が優先されるように、これらのタイプを最後に追加する必要があります。

ドロップ中に複数のファイルがデータ転送の複数のアイテムとして受信されます。詳細については、「複数のアイテムのドラッグ アンド ドロップ」を参照してください。

次の例は、その領域を作成する方法を示しています。ドロップされたファイルの受信:

<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-filetype が含まれる場合にのみ、イベントは false を返します。ドロップ イベント中に、ファイル タイプに関連付けられたデータが取得されます。 mozGetDataAt メソッドは、チェックして nsIFile に変換する必要がある nsISupports を返すため、ここでは、instanceofoperator が使用されていることに注意してください。これは、誰かが間違えた場合に備えて追加のチェックとしても役立ちます。

画像のドラッグ 編集

実際、Mozilla は Mac または Linux プラットフォームでの直接画像のドラッグをサポートしていません。 、画像は通常、URL によってのみドラッグされます。これを行うには、他の URL リンクと同様に、データは画像の URL であるか、画像が Web サイトに保存されていない場合はデータ URL である必要があります。データ URL の詳細については、データ URL スキームを参照してください。

他のリンクと同様に、text/plaintype のデータにも URL が含まれている必要があります。通常、データ URL はそれほど役に立ちません。テキストコンテキストでは、この状況では text/plaindata を除外したい場合があります。

In chrome or other privileged code, you may also use the image/jpeg,  image/pngor  image/giftypes, depending on the type of image. The data should be an object which implements the  nsIInputStreaminterface. When this stream is read, it should provide the data bits for the image, as if the image was a file of that type.

You should also include the application/x-moz-filetype if the image is located on disk. In fact, this a common way in which image files are dragged.

It is important to set the data in the right order, from most specific to least specific. The image type such as image/jpegshould come first, followed by the  application/x-moz-filetype. Next, you should set the  text/uri-listdata and finally the  text/plaindata. For example:

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);

Note that the mozGetDataAtmethod is used for non-text data. As some contexts may only include some of these types, it is important to check which type is made available when receiving dropped images.

Dragging Nodes EDIT

Nodes and elements in a document may be dragged using the application/x-moz-nodetype. This data for the type should be a DOM node. This allows the drop target to receive the actual node where the drag was started from. Note that callers from a different domain will not be able to access the node even when it has been dropped.

You should always include a plain text alternative for the node.

Dragging Custom Data EDIT

You can also use other types that you make up for custom purposes. You should strive to always include a plain text alternative unless that object being dragged is specific to a particular site or application. In this case, the custom type ensures that the data cannot be dropped elsewhere.

Dragging files to an operating system folder EDIT

There are cases in which you may want to add a file to an existing drag event session, and you may also want to write the file to disk when the drop operation happens over a folder in the operating system when your code receives notification of the target folder's location. This only works in extensions (or other privileged code) and the data flavor "application/moz-file-promise" should be used. The following sample offers an overview of this advanced case:

// currentEvent is a given existing drag operation eventcurrentEvent.dataTransfer.setData("text/x-moz-url", URL);currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL);currentEvent.dataTransfer.setData("application/x-moz-file-promise-filename", leafName);currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise',                  new dataProvider(success,error),                  0, Components.interfaces.nsISupports);function dataProvider(){} dataProvider.prototype = {  QueryInterface : function(iid) {    if (iid.equals(Components.interfaces.nsIFlavorDataProvider)                  || iid.equals(Components.interfaces.nsISupports))      return this;    throw Components.results.NS_NOINTERFACE;  },  getFlavorData : function(aTransferable, aFlavor, aData, aDataLen) {    if (aFlavor == 'application/x-moz-file-promise') {         var urlPrimitive = {};       var dataSize = {};         aTransferable.getTransferData('application/x-moz-file-promise-url', urlPrimitive, dataSize);       var url = new String(urlPrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));       console.log("URL file orignal is = " + url);             var namePrimitive = {};       aTransferable.getTransferData('application/x-moz-file-promise-filename', namePrimitive, dataSize);       var name = new String(namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));         console.log("target filename is = " + name);         var dirPrimitive = {};       aTransferable.getTransferData('application/x-moz-file-promise-dir', dirPrimitive, dataSize);       var dir = dirPrimitive.value.QueryInterface(Components.interfaces.nsILocalFile);         console.log("target folder is = " + dir.path);         var file = Cc['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile);       file.initWithPath(dir.path);       file.appendRelativePath(name);         console.log("output final path is =" + file.path);         // now you can write or copy the file yourself...    }   }}

<strong>来源：https://developer.mozilla.org</strong>