我应该用什么格式（MIME类型）进行HTML5拖放操作？ [英] What format (MIME Type) should I use for HTML5 drag and drop operations?

问题描述

我开始尝试HTML5拖放。然后，在dragstart事件处理程序中，我们应该运行 setData（），它接收两个参数：格式和数据。

  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 ？


• 其他什么？


• 多个？

我编码我的对象（ data 参数 setData（））？

• 逗号分隔（或任何其他分隔符）键=值对？


• 使用JSON序列化对象


• 只需一个id，而在dropzone，我必须使用id来检索完整的对象？


• 只发送对象的引用，甚至不排序任何东西？ （不可能，数据参数必须是一个字符串）

（我意识到一个拖放对象可能是另一个问题，但它与MIME类型的选择密切相关）

---

一些参考文献：

• http://dev.w3.org/html5/spec/dnd.html


• http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd。 html＃dnd


• https：//开发人员.mozilla.org / En / DragDrop / Drag_Operations


• https://developer.mozilla.org/En/DragDrop/DataTransfer


• http://www.html5rocks.com/en/tutorials/dnd/basics/

解决方案

HTML5规范有一些拖放示例（请参阅当前工作草案或最新版本）。在这样的示例中，使用自定义MIME类型，并且还建议使用特定于站点的MIME类型。看到这个片段：

 < p>在下面放下你最喜欢的水果：< / p> 
< ol dropzone =move s：text / x-exampleondrop =dropHandler（event）> 
<  - 不要忘记将text / x-example类型更改为特定于您的站点的
  - > 
< / ol> 
< script> 
 var internalDNDType ='text / x-example'; //将此设置为特定于您的网站的东西
 [...] 
  

所以，这很棒，这意味着我们应该使用自定义的MIME类型！ （除非我们实际上是拖拽纯文本，或者只是一个URL，或者已经有着名的类型）

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

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

  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 
应用程序/ vnd.yamaha.openscoreformat.osfpvg + xml 
 
应用程序/ vnd.hal + json 
应用程序/ vnd.hal + xml 
  

我可以注意到一个名字的模式：

• 一个点分层分隔多个元素（例如， config 是 iptv 的孩子，这是 nokia ，这是 vnd 的孩子）。


• 连字符分隔复合词（如 google-earth 和 openxmlformats-officedocument ）。


• A PLU s符号用于进一步指定这些示例中的序列化格式（ + json 和 + xml ）。


• 应用于未注册IANA的MIME类型的 x - 前缀（因此，该列表中未显示）。

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

application / x-mysite.myobject + json （或 application / x-mysite.parentobject.childobject + json ）

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

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

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, …).

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

• text/plain?
• text/x-myapp-myobjtype?
• application/x-myapp-myobjtype?
• application/x-myapp.myobjtype+json?
• something else?
• more than one?

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

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

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

---

Some references:

• 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/

解决方案

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
[...]

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)

But how do we create such custom MIME type?

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:

• 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).

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

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

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

这篇关于我应该用什么格式（MIME类型）进行HTML5拖放操作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！