javascript - 我应该为 HTML5 拖放操作使用什么格式(MIME 类型)？

Question

我开始尝试使用 HTML5 拖放操作。然后，在 dragstart 事件处理程序中，我们应该运行 setData()，它接收两个参数:format 和 data。

function dragstart_handler(ev) {
    ev.dataTransfer.setData('text/plain', 'foobar');
}

我想在我的 Web 应用程序中将某种“对象”从一个容器拖到另一个容器中。 “对象”是指具有多个属性(颜色、文本、作者、日期……)的东西。

我应该使用哪种格式(或 MIME 类型)？

• text/plain?
• text/x-myapp-myobjtype?
• application/x-myapp-myobjtype?
• application/x-myapp.myobjtype+json?
• 还有别的吗？
• 不止一个？

我应该如何编码我的对象(setData() 的data 参数)？

• 逗号分隔(或任何其他定界符)键=值对？
• 使用 JSON 序列化对象？
• 只是一个 id，在 dropzone 我必须只使用 id 检索完整的对象？
• 只发送对象的引用，甚至不序列化任何东西？ (不可能，data 参数必须是字符串)

(我意识到“How to enconde an object for Drag and Drop”在这里可能是另一个问题，但这与MIME Type的选择密切相关)

---

一些引用资料:

• http://dev.w3.org/html5/spec/dnd.html
• http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd
• https://developer.mozilla.org/En/DragDrop/Drag_Operations
• https://developer.mozilla.org/En/DragDrop/DataTransfer
• http://www.html5rocks.com/en/tutorials/dnd/basics/

Answer 1

HTML5 规范有一些拖放示例(参见 current working draft 或 latest version)。在此类示例中，使用了自定义 MIME 类型，还建议使用特定于站点的 MIME 类型。看到这个片段:

<p>Drop your favorite fruits below:</p>
<ol dropzone="move s:text/x-example" ondrop="dropHandler(event)">
 <-- don't forget to change the "text/x-example" type to something
 specific to your site -->
</ol>
<script>
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
[...]

太好了，这意味着我们应该使用自定义 MIME 类型! (除非我们实际上是在拖动纯文本，或者只是一个 URL，或者已经具有众所周知类型的东西)

但是我们如何创建这样的自定义 MIME 类型呢？

我没有找到关于此的文档，所以我查看了其他 MIME 类型。 list of text media types没有什么特别的，但是 list of application media types很有趣。让我从该列表中获取示例:

application/atom+xml
application/xhtml+xml
application/xmpp+xml

application/vnd.google-earth.kml+xml
application/vnd.google-earth.kmz
application/vnd.iptc.g2.newsitem+xml
application/vnd.iptc.g2.packageitem+xml
application/vnd.nokia.iptv.config+xml
application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml
application/vnd.yamaha.openscoreformat.osfpvg+xml

application/vnd.hal+json
application/vnd.hal+xml

我能注意到命名的模式:

• 一个点分层分隔多个“元素”(例如，config 是 iptv 的子项，即 nokia 的子项，即vnd 的 child )。
• 连字符分隔复合词(如 google-earth 和 openxmlformats-officedocument)。
• 加号用于进一步指定序列化格式(在这些示例中为 +json 和 +xml)。
• x- 前缀应用于未在 IANA 注册的 MIME 类型(因此，未显示在该列表中)。

根据这些规则，我可以建议使用以下 MIME 类型:

application/x-mysite.myobject+json(或application/x-mysite.parentobject.childobject+json)

这似乎是为以 JSON 编码的 Web 应用程序对象指定自定义 MIME 类型的最精确和正确的方法。