拖拽类型_html/css_WEB-ITnose

拖拽文本 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 linkhttp://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.orgMozillahttp://www.xulplanet.comXUL Planet

拖拽HTML与XML EDIT

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

A local file is dragged using the application/x-moz-filetype with a data value that is an  nsIFileobject. 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  mozSetDataAtmethod to assign the data. Similarly, when retrieving the data, you must use the  mozGetDataAtmethod.

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-listand/or  text/plaintypes. These types should be added last so that the more specific  application/x-moz-filetype has higher priority.

Multiple files will be received during a drop as mutliple items in the data transfer. See Dragging and Dropping Multiple Itemsfor 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-filetype. 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  instanceofoperator is used here as the mozGetDataAtmethod will return an  nsISupportsthat 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 Images EDIT

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-listtype 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/plaintype 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/plaindata in this situation.

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>