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

2022-01-11 00:00:00 drag-and-drop javascript html dto

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

I'm starting to experiment with HTML5 Drag and Drop. Then, in the dragstart event handler we should run setData(), which receives two parameters: format and data.

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

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

I want to drag some kind of "object" from one container into another container, inside my web application. By "object", I mean something that has multiple attributes (color, text, author, date, …).

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

What kind of format (or MIME Type) should I use?

  • 文本/纯文本?
  • text/x-myapp-myobjtype?
  • application/x-myapp-myobjtype?
  • application/x-myapp.myobjtype+json?
  • 还有什么?
  • 不止一个?

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

How should I encode my object (the data parameter of setData())?

  • 以逗号分隔(或任何其他分隔符)的键值对?
  • 使用 JSON 序列化对象?
  • 只是一个 id，在 dropzone 我必须只使用 id 检索完整的对象吗?
  • 只发送对对象的引用，甚至不序列化任何东西?(不可能，data 参数必须是字符串)
  • Comma-separated (or any other delimiter) key=value pairs?
  • Serialize the object using JSON?
  • Just an id, and at the dropzone I must retrieve the full object using just the id?
  • Send just a reference to the object, without even serializing anything? (not possible, the data argument must be a string)

(我意识到如何对拖放对象进行编码"在这里可能是另一个问题，但它与 MIME 类型的选择密切相关)

(I realize that "How to enconde an object for Drag and Drop" could be another question here, but it is closely related to the choice of 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/

推荐答案

HTML5规范有一些拖放示例(参见当前工作草案或最新版本).在这些示例中，使用了自定义 MIME 类型，并且还建议使用特定于站点的 MIME 类型.看到这个片段:

The HTML5 specification has some drag and drop examples (see the current working draft or the latest version). In such examples, a custom MIME Type is used, and the use of site-specific MIME types is also suggested. See this snippet:

<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，或者已经具有众所周知的类型)

So, that's great, this means we should use a custom MIME type! (unless we are actually dragging plain text, or just a URL, or something that already has a well-known type)

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

But how do we create such custom MIME type?

我没有找到关于此的文档，所以我查看了其他 MIME 类型.文本媒体类型列表没有什么特别之处，但 应用媒体类型列表非常有趣.让我从该列表中获取一个示例:

I found no documentation about this, so I looked at other MIME types. The list of text media types had nothing special, but the list of application media types was quite interesting. Let me grab a sample from that list:

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

我可以注意到命名的模式:

I can notice a pattern for making names:

  • 一个点分层分隔多个元素"(例如，config 是 iptv 的子级，即 nokia 的子级，即vnd 的子节点).
  • 连字符分隔复合词(如 google-earth 和 openxmlformats-officedocument).
  • 加号用于进一步指定序列化格式(在这些示例中为 +json 和 +xml).
  • x- 前缀应用于未向 IANA 注册的 MIME 类型(因此，未显示在该列表中).
  • A dot hierarchically separates multiple "elements" (for instance, config is child of iptv, that is child of nokia, that is child of vnd).
  • A hyphen separates composite words (as in google-earth and openxmlformats-officedocument).
  • A plus sign serves to further specify the serializing format (+json and +xml in these examples).
  • The x- prefix should be used for MIME types not registered with IANA (and, thus, not shown on that list).

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

Based on these rules, I can suggest using the following MIME type:

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

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

This seems to be the most precise and correct way to specify a custom MIME type for a web application object encoded in JSON.

相关文章