HTML拖放支持拖动各种类型

HTML拖放支持拖动各种类型的数据，包括纯文本，URL，HTML代码，文件等。该文档描述了拖放常见数据类型的最佳做法。

警告：

本文档中包含一个moz前缀的所有方法和属性(如mozSetDataAt())是Gecko的具体接口。这些接口仅适用于基于Gecko的浏览器。

拖动文字

拖动文字时请使用 text/plain 类型，那么数据必须是字符串，例如：

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

拖动文本框中的文字和页面选中部分的文字是自动完成的， 所以你不需要手动处理这些拖动。

如果应用和拖动目标不支持其它类型，推荐你使用 text/plain 类型的数据进行填充，否则将没有默认的替代文字。建议总是在最后添加原始文字类型的数据做为备选项（译者plter注：如果拖动开始时没有设置数据，则在有些浏览器中后续拖动相关事件可能不会触发）。

注：在旧代码中，可能会使用 text/unicode 或者 Text 类型， 这两个与 text/plain 是一样的，并且应该被替换用于存储和提取数据。

拖动链接

Links should include data of two types; the first should be the URL using the type text/uri-list, and the second is the URL using the text/plain type. Both types should use the same data, the URL of the link. For example:

var dt = event.dataTransfer;

拖动HTML和XML

var dt = event.dataTransfer;

dt.setData("text/html", "Hello there, stranger");

dt.setData("text/plain", "Hello there, stranger");

拖动文件

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

拖动图像

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

拖动节点

拖动自定义数据

将文件拖动到一个操作系统文件夹