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;

dt.setData(“text/uri-list”, “http://www.mozilla.org”);

dt.setData(“text/plain”, “http://www.mozilla.org”);

拖动HTML和XML

var dt = event.dataTransfer;

dt.setData(“text/html”, “Hello there, <strong>stranger</strong>”);

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

拖动节点

拖动自定义数据

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

HTML拖放支持拖动各种类型》来自互联网,仅为收藏学习,如侵权请联系删除。本文URL:http://www.hashtobe.com/1017.html