問題描述

我開始嘗試使用 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.

這篇關于我應該為 HTML5 拖放操作使用什么格式(MIME 類型)?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！