拖拽類型

拖拽文本EDIT

拖拽文本的時候，使用 text/plain 類型。數據應該是被拖拽的字符串。例如：

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

拖拽網頁上的文本框內文本及已選文本是自動完成的，因此你不須要本身處理。

建議你老是添加text/plain類型數據做爲不支持其它類型的應用或投放目標的降級，除非沒有可選的符合邏輯的文本。老是將純文本類型添加在最後，由於這是最不具體的數據（ as it is the least specific）。

在舊的代碼中，你可能會遇到text/unicode或Text類型。這些與text/plain類型是等效的，存儲、獲取到的都是純文本數據。

拖拽連接EDIT

連接須要包含兩種類型的數據；第一種是text/uri-list類型的URL，第二種是text/plain類型的URL。兩種類型要使用相同的數據，即連接的URL。例如：

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

與以前同樣，將text/plain類型添加在最後，由於它不如uri類型具體。

注意URL類型是uri-list，「uri」中包含的是「i」，而不是「l」。

拖拽多條連接時，你能夠使用換行將每條連接分開。以井號（#）開頭的行是註釋，不該該認爲是合法的URL。你能夠使用註釋來指明連接的含義，或保存與連接相關的標題。text/plain版本的數據應該包含全部的連接但不該該包含註釋。

例如：

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

這個text/uri-list數據樣例包含兩條連接和一條註釋。

當獲得一條拖放的連接，你須要確保你能處理包含多條連接以及註釋的數據。出於便利考慮，特殊類型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.org
Mozilla
http://www.xulplanet.com
XUL Planet

拖拽HTML與XMLEDIT

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

Dragging FilesEDIT

A local file is dragged using the application/x-moz-file type with a data value that is an nsIFile object. Non-privileged web pages are not able to retrieve or modify data of this type. Because a file is not a string, you must use the mozSetDataAt method to assign the data. Similarly, when retrieving the data, you must use the mozGetDataAt method.

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

If possible, you may also include the file URL of the file using both the text/uri-list and/or text/plain types. These types should be added last so that the more specific application/x-moz-file type has higher priority.

Multiple files will be received during a drop as mutliple items in the data transfer. See Dragging and Dropping Multiple Items for more details about this.

The following example shows how to create an area for receiving dropped files:

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

In this example, the event returns false only if the data transfer contains the application/x-moz-file type. During the drop event, the data associated with the file type is retrieved, and the filename of the file is added to the listbox. Note that the instanceof operator is used here as themozGetDataAt method will return an nsISupports that needs to be checked and converted into an nsIFile. This is also a good extra check in case someone made a mistake and added a non-file for this type.

Dragging ImagesEDIT

Direct image dragging is not commonly done. In fact, Mozilla does not support direct image dragging on Mac or Linux platforms. Instead, images are usually dragged only by their URLs. To do this, use the text/uri-list type as with other URL links. The data should be the URL of the image or a data URL if the image is not stored on a web site or disk. For more information about data URLs, see the data URL scheme.

As with other links, the data for the text/plain type should also contain the URL. However, a data URL is not usually as useful in a text context, so you may wish to exclude the text/plain data in this situation.

In chrome or other privileged code, you may also use the image/jpeg, image/png or image/gif types, depending on the type of image. The data should be an object which implements the nsIInputStream interface. 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-file type 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/jpeg should come first, followed by the application/x-moz-file type. Next, you should set the text/uri-list data and finally the text/plain data. 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 mozGetDataAt method 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 NodesEDIT

Nodes and elements in a document may be dragged using the application/x-moz-node type. 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 DataEDIT

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 folderEDIT

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 event

currentEvent.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...
    } 
  }
}

　　

來源：https://developer.mozilla.org